... class UserManage extends React.Component { //表单查询 handleQuery = (e) => { if (e) e.preventDefault(); const {dispatch, form} = this.props; form.validateFields((err, fieldsValue) => { if (err) return; //获取时间范畴的值 const rangeValue = fieldsValue['lastOnlineTime']; const userQueryLike = fieldsValue['userQueryLike']; //获取查询条件 const values = { ...fieldsValue, "lastOnlineTime": (rangeValue && rangeValue.length > 1) ? ([rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]) : null, "userQueryLike": userQueryLike ? userQueryLike.trim() : userQueryLike, }; dispatch({ type: "userManageModel/getUserList", payload: { values: values, } }); }); }; ... } ...
在此要领里又挪用了form.validateFields校验并获取一组输入域的值与Error，入参fieldsValue就是从表单的FormItem里取到的值，然后利用fieldsValue['lastOnlineTime']这种形式，通过与之前写的getFieldDecorator('lastOnlineTime')发生映射，就获取了单个输入域的值。
总结一下，利用React的Form实现表单成果，必需要利用Form.create(组件)，使包装的组件带有this.props.form属性，才气挪用form的getFieldDecorator和validateFields要领，getFieldDecorator中的id对应validateFields中的fieldsValue['']；而columns中的dateIndex对应的是从model取到数据json串的键名，这个要分清
除了这种要领，尚有两种实现获取input输入框的值然后提交的要领，可以看这篇文章：React获取input的值并提交的两种要领
到此这篇关于React如何操作Antd的Form组件实现表单成果详解的文章就先容到这了,更多相关React用Form组件实现表单内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！
您大概感乐趣的文章: