使用resetFields可清空表单,用法:
this.props.form.resetFields();
1.如果 Form.Item
没有initValue的情况下,直接使用resetFields可以清空文本框的值
2.如果 Form.Item
是有initValue的情况下,直接使用resetFields方法会直接重置为initValue的值。
如果 Form.Item 中的值 是与 state中的值做了双向绑定,例如:
const { productName } = this.state;
<Form.Item label="产品名称">
{getFieldDecorator('productName', {
initialValue: productName,
rules: [
{
message: '产品名称',
},
],
})(
<Input
type="text"
placeholder="产品名称"
className="PDCMS-input-middle"
onChange={e => {
this.setState({ productName: e.target.value });
}}
></Input>,
)}
</Form.Item>
这里 state 中的 productName 与表单是双向绑定的,此时使用this.props.form.resetFields() 是没有效果的,因为他的 initialValue 就是来自state,输入框是什么 state中的productName就是什么,使用resetFields方法会直接重置为initialValue的值,也就没有变化。
这里就可以使用 setFieldsValue
手动清空;
代码:
const { setFieldsValue } = this.props.form;
setFieldsValue({ productStatus: '', productName: '' });
1.如需转载本站原创文章,请务必注明文章出处并附上链接,非常感谢。
2.本站用于记录个人 工作、学习、生活,非商业网站,更多信息请 点击这里