表单验证与表单组件

我不确定如何使用antd <Form/>组件发现here进行表单验证。该文档在<Form/>组件上指定了onSubmit prop，该组件传递了一个事件。然后它似乎触发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()时，如文档所示，这些值来自哪里？

来源

2017-01-12 Orbit

整个表单数据由antd表单组件管理，所以你不需要通过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-13 18:00:26 Kossel

这是我原来尝试过，但'form'是一致的定义。因为它是一个道具，我认为它需要由父组件传入。如何在嵌套字段中传递prop，比如'this.props.form.validateFields'，以及该函数的签名在父代中的样子是什么？ – Orbit

'this.props.form'由'Form.create'中的高阶函数注入，让我更新答案 – Kossel

这实际上就是我最终的结果。这些错误是由于在几个处理程序中错过了'.bind（this）'而引起的，导致道具出现问题。我会标记你的答案是正确的。 – Orbit

我知道它已经很晚了，也不知道你有同样的问题。但最近我遇到了像表单值这样的问题，并不适合我。所以我使用了下面的代码，它对我的工作很好。愿它能帮助别人。

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

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

，并在形式

<Form onSubmit={this.handleSubmit}>

来源

2017-09-11 11:23:37 Jaison

表单验证与表单组件

回答

相关问题