Question

我对JavaScript和React都很陌生，但是一直在玩一个用于创建带验证的表单的UI组件库，但遇到了一些麻烦。

遵循他们的API /文档here我创建了一个Form，它在使用From.create时应该包含道具但是我在checkConfirm函数Uncaught TypeError: Cannot read property 'form' of undefined1行中这样做时得到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();
  }

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

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

1 个答案: