antd表单验证无效的情况怎样处理？方法是什么？
发布时间：2022-04-12 04:35:27 所属栏目：语言 来源：互联网
导读：antd表单验证无效的情况怎样解决？关于antd form表单验证实现的问题，本文给大家分享两种解决方法，方法如下，有需要的朋友可以借鉴参考。 方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： Form.Item { getFieldDecorator(
|
antd表单验证无效的情况怎样解决？关于antd form表单验证实现的问题，本文给大家分享两种解决方法，方法如下，有需要的朋友可以借鉴参考。 方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', }], })( <Input placeholder='请输入用户名'/> ) } </Form.Item> 正确代码： <Form.Item> { getFieldDecorator('userName',{ initialValue:'Tom', rules:[ {required: true,message:'请输入用户名'} ] })( <Input placeholder='请输入用户名'/> ) } </Form.Item> 方法二：通过setFieldsValue来设置默认值可以解决 this.props.form.setFieldsValue({ inputValue1:this.state.inputValue1, inputValue2:this.state.inputValue2, inputValue3:this.state.inputValue3, }); 如果还不能解决，查看是否在表单提交函数里写了验证代码 handleSubmit = (e) => { e.preventDefault(); this.props.form.validateFields((err) => { if (err) { console.log('表单验证失败'); }else{ this.handleOk();//这里是表单验证成功执行的函数 } }); }; 补充知识：antd自定义组件初始值没有返回或者设置initialValue，form.validateFields不会执行验证 在自定义组件中加个componentDidMount返回初始值就可以啦 componentDidMount() { const { onChange } = this.props; onChange({ ...this.state, }); } （编辑：宁德站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
