Question

我不确定如何使用找到here的antd <Form/>组件进行表单验证。该文档在onSubmit组件上指定了<Form/>道具，该道具传递了一个事件。然后它似乎在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返回undefined。
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()注入，否则您将被定义为未定义，例如：

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}>

使用表单组件进行表单验证

2 个答案: