Uncaught TypeError：未定義のプロパティ 'form'を読み取ることができません

Question

JavaScriptとReactではかなり新しいですが、antd UIコンポーネントライブラリで検証済みのフォームを作成していましたが、いくつかの問題が発生しました。

そのAPI /ドキュメントhere後、私はFrom.createを使用している場合checkConfirm機能でそうconst form = this.props.form;ラインをやったときにしかし、私はUncaught TypeError: Cannot read property 'form' of undefined1を取得する小道具が含まれている必要がありますフォームを作成しました。

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) 
    } 

機能Defination

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

あなたが機能するためにどんな取り決めを渡していません。