未被捕獲的TypeError：無法讀取未定義的屬性“ form”

Question

對JavaScript和React來說是一個很新的事物，但是一直在使用一個古老的UI組件庫來創建帶有驗證的表單，但遇到了一些麻煩。

按照這里的API /文檔，我創建了一個Form，使用From.create時應包含道具，但是卻收到Uncaught TypeError: Cannot read property 'form' of undefined1在checkConfirm函數const form = this.props.form;這樣做時， 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();
  }

您沒有通過任何安排以發揮作用。