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

我不确定如何使用找到的antd组件进行表单验证。文档指定了组件上的onSubmit属性，该属性通过事件传递。然后它似乎触发了这个.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>

我无法从传递到submit回调的事件中检索值，因为e.target.value返回未定义的值

在对this.props.validateFields的调用中，如文档所示，这些值来自何处？

---

整个表单数据由antd表单组件管理，因此不需要通过e.target.value获取，只需调用

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

当你想做验证的时候。如果存在错误或完整的表单数据集，此回调将为您提供帮助

值来自form.create注入的表单道具

form.create也会注入this.props.form，否则将无法定义，例如：

class MyComponent extends React.Component {
...
}

export default Form.create()(MyComponent);

---

您还可以使用validateFields和scroll，而不是validateFields，后者将自动滚动到出现错误的字段。

整个表单数据由antd表单组件管理，因此您不需要通过e.target.value获取，您需要的是调用

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

当你想做验证的时候。如果存在错误或完整的表单数据集，此回调将为您提供帮助

值来自form.create注入的表单道具

form.create也会注入this.props.form，否则将无法定义，例如：

class MyComponent extends React.Component {
...
}

export default Form.create()(MyComponent);

---

您也可以使用validateFields和scroll来代替validateFields，后者将自动滚动到出现错误的字段。

我知道已经很晚了，也不确定您是否有相同的问题。但最近我遇到了一个问题，比如表单值不适合我。所以我使用了下面的代码，它对我来说很好。愿它能帮助别人

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

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

在形式上

<Form onSubmit={this.handleSubmit}>

---

我知道已经很晚了，也不知道你是否也有同样的问题。但最近我遇到了一个问题，比如表单值不适合我。所以我使用了下面的代码，它对我来说很好。愿它能帮助别人

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

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

在形式上

<Form onSubmit={this.handleSubmit}>

---

这是我最初尝试的，但形式一直没有定义。由于它是一个道具，我假设它需要由父组件传入。如何在嵌套字段（如this.props.form.validateFields）中传入prop，以及该函数在父字段中的签名是什么样子的？this.props.form由form.create中的一个高阶函数注入，让我更新答案这基本上就是我最终得到的结果。这些错误是由于在几个处理程序上缺少.bindthis而导致的，这导致了道具的问题。我会将你的答案标记为正确。这是我最初尝试的，但形式一直没有定义。由于它是一个道具，我假设它需要由父组件传入。如何在嵌套字段（如this.props.form.validateFields）中传入prop，以及该函数在父字段中的签名是什么样子的？this.props.form由form.create中的一个高阶函数注入，让我更新答案这基本上就是我最终得到的结果。这些错误是由于在几个处理程序上缺少.bindthis而导致的，这导致了道具的问题。我会认为你的答案是正确的。