使用 Form 组件进行表单验证

Question

我不确定如何使用找到的 antd <Form/> 组件进行表单验证 here。该文档在 <Form/> 组件上指定了一个 onSubmit 道具，它被传递了一个事件。然后它似乎触发了 this.props.form 中的一个函数。我目前正在使用以下代码：

handleSubmit(e) {
   e.preventDefault();

  console.log('before' + e.target.value)

  this.props.validateFields((err, values) => {
  console.log('errors: ' + err)
  console.log(values)
    if (!err) {
      console.log('Received values of form: ', values);
    }
  });
}

<Form inline onSubmit={this.handleSubmit.bind(this)}>
    ....
</Form>

我无法从传递到提交回调的事件中检索值，因为 e.target.value returns 未定义。
1. 在对 this.props.validateFields() 的调用中，如文档中所示，这些值来自哪里？

Answer 1

整个表单数据由antd Form组件管理，所以你不需要e.target.value获取，只需要调用

this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });

什么时候你想做验证。如果有错误或完整的表单数据集，此回调会为您提供。

values 来自 Form.create();

注入的表单道具

this.props.form也是被Form.create()注入的，否则会得到undefined，eg:

class MyComponent extends React.Component {
...
}

export default Form.create()(MyComponent);

您也可以使用 validateFieldsAndScroll 代替 validateFields，它将自动滚动到发生错误的字段。

Answer 2

我知道现在已经很晚了，也不确定您遇到过同样的问题。但最近我遇到了表单值不适合我的问题。所以我使用了下面的代码并且它对我来说工作正常。希望它能帮助别人。

handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
        if (err) {
            return;
        }

        alert(JSON.stringify(values));
    });
}

并以

的形式

<Form onSubmit={this.handleSubmit}>

使用 Form 组件进行表单验证

Form validation with Form component

ecmascript-6

reactjs

antd