未捕获的类型错误：无法读取未定义的属性“形式”答案

【问题标题】：Uncaught TypeError: Cannot read property 'form' of undefined未捕获的类型错误：无法读取未定义的属性“形式”
【发布时间】：2016-12-16 12:03:09
【问题描述】：

我是 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);

【问题讨论】：

标签： javascript forms reactjs

【解决方案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();
  }

你没有通过任何安排来运作。

【讨论】：