Uncaught TypeError：無法讀取undefined的屬性'form'

Question

對於JavaScript和React來說，這是一個相當新穎的東西，但一直在玩弄一個UI組件庫，它創建一個帶有驗證的表單，但遇到了一些麻煩。

按照他們的API /文檔here我創建使用From.create時應該包含的道具表，但是我得到一個Uncaught TypeError: Cannot read property 'form' of undefined1在checkConfirm功能const form = this.props.form;線這樣做的時候。

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

我發現了一些錯誤，在這裏，

。錯誤的原因，

您需要綁定到這個功能類似，

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

功能界定及

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

您沒有傳遞任何安排工作。