未被捕获的TypeError：无法读取未定义的属性“ form”

Question

Am pretty new to JavaScript and React but have been playing around with a antd a UI Component library creating a form with validation but ran into some troubles.

Following their API/Documentation here I created a Form which should contain the props when using From.create however I get a Uncaught TypeError: Cannot read property 'form' of undefined1 when doing so in the checkConfirm function const form = this.props.form; line.

  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

I found some mistakes here,

. Reason of error,

You need to bind this to function like,

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

Function Defination

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

You are not passing any arrangements to function.