Uncaught TypeError: Kann die Eigenschaft 'form' von undefined nicht lesen

Question

Bin ziemlich neu in JavaScript und React, habe aber mit einer antd a UI Component-Bibliothek experimentiert, die ein Formular mit Validierung erstellt hat, aber einige Probleme hatte.

Nach ihrer API/Dokumentation here habe ich ein Formular, das die Requisiten enthalten sollte, wenn jedoch mit From.create ich eine Uncaught TypeError: Cannot read property 'form' of undefined1 erhalten, wenn dies in der checkConfirm Funktion const form = this.props.form; Linie zu tun.

class CustomizedForm extends React.Component { 
    constructor(...args) { 
    super(...args); 
    } 
    handleSubmit() { 
    e.preventDefault(); 
    this.props.form.validateFields((err, values) => { 
     if (!err) { 
     console.log('Received values of form: ', values); 
     } 
    }) 
    } 
    checkConfirm(rule, value, callback) { 
    console.log(value.length); 
    const form = this.props.form; 
    if (value.length == 11) { 
     form.validateFields(['confirm'], { force: true }); 
    }; 
    callback(); 
    } 

    render() { 
    const { getFieldDecorator } = this.props.form; 
    const formItemLayout = { 
     labelCol: { span: 6 }, 
     wrapperCol: { span: 14 } 
    }; 
    return (
     <div> 
     <Form inline style={{ marginTop: 10, marginBottom: 10 }} onSubmit={this.handleSubmit}> 
      <FormItem 
      {...formItemLayout} 
      hasFeedback 
      > 
      {getFieldDecorator('password', { 
       rules: [{ 
       required: true, message: 'Please input your password!', 
       }, { 
       validator: this.checkConfirm, 
       }], 
      })(
       <Input placeholder="password" /> 
      )} 
      </FormItem> 
      <FormItem hasFeedback> 

      </FormItem> 
      <FormItem   > 
      <Input style={{ width: '200px' }} size="default" placeholder="Shelf Place"></Input> 
      </FormItem> 
      <FormItem> 
      <ProcessSelect /> 
      </FormItem> 
      <FormItem> 
      <ZoneSelect /> 
      </FormItem> 
      <FormItem> 
      <ZalosRangePicker /> 
      </FormItem> 
      <FormItem> 
      <ButtonGroup size="default"> 
       <Button size="default" icon="search" /> 
       <Button size="default" icon="close" /> 
      </ButtonGroup> 
      </FormItem> 
     </Form> 
     </div> 
    ) 
    } 
} 
CustomizedForm = Form.create({})(CustomizedForm); 

Answer 1

Ich fand hier ein paar Fehler,

. Fehlerursache,

Sie müssen diese binden, wie, funktionieren

constructor(...args) { 
    super(...args); 
this.checkConfirm = this.checkConfirm.bind(this) 
    } 

Funktion Defination

checkConfirm(rule, value, callback) { 
    console.log(value.length); 
    const form = this.props.form; 
    if (value.length == 11) { 
     form.validateFields(['confirm'], { force: true }); 
    }; 
    callback(); 
    } 

Sie keine Vereinbarungen sind vorbei zu funktionieren.