1

我不确定如何使用此处<Form/>找到的 antd 组件进行表单验证。文档在组件上指定了一个道具，该道具被传递了一个事件。然后它似乎触发了里面的一个函数。我目前正在使用以下代码：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>

  1. 我无法从传递给提交回调的事件中检索值，因为e.target.value返回未定义。

    1. 在对 的调用中this.props.validateFields()，如文档中所示，这些值来自哪里？
4

2 回答 2

5

整个表单数据由 antd 表单组件管理，所以不需要 then by 获取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 自动滚动到发生错误的字段。

于 2017-01-13T18:00:26.427 回答
0

我知道已经很晚了，也不确定你是否有同样的问题。但最近我遇到了表单值不适合我的问题。所以我使用了下面的代码，它对我来说工作正常。愿它会帮助别人。

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

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

并以形式

<Form onSubmit={this.handleSubmit}>
于 2017-09-11T11:23:37.647 回答