菜鸟式网站建设图书/百度推广首页

转自：Antd中清空Form表单输入框

设置 Form 初始值

法一：在 <Form.Item> 使用 defaultValue 设置默认值(一般没用)

法二：在

组件的 initValue 中设置初始值，但是注意每个字段的初始值必须是常量，不能是 state 状态

法三：通过 useEffect() 在页面渲染前设置 form 表单项的值

比如

useEffect(() => () => {form.setFieldValue('type', '1'); // 设置表单项 type 的初始值});

清空 Form 表单输入框

法一：使用 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: '产品名称',},],})(<Inputtype="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

使用 setFieldsValue 手动清空；案例代码：

const { setFieldsValue } = this.props.form;setFieldsValue({ productStatus: '', productName: '' });

转自：Antd中清空Form表单输入框