可以使用 Antd Form 的 getFieldDecorator 方法,添加自定义的 allowClear 功能。
示例代码:
import { Form, Input } from 'antd';
import React, { Component } from 'react';
class MyForm extends Component {
clearInput = (event) => {
event.preventDefault();
const { resetFields } = this.props.form;
resetFields(['my-input']);
};
render() {
const { getFieldDecorator } = this.props.form;
return (
{getFieldDecorator('my-input', {
rules: [{
required: true,
message: 'Please input your input!',
}],
})(
X
}
/>,
)}
);
}
}
const WrappedForm = Form.create({ name: 'my-form' })(MyForm);
export default WrappedForm;
在这个示例代码中,使用 getFieldDecorator 方法来渲染一个带有必填规则的 input。然后设置了 allowClear 为 true,表示在 input 内容前面添加一个可以清空内容的小 x 图标。
在 input 后面添加了一个自定义的后缀(suffix),一个可以点击的按钮。这个按钮的点击事件会清空 input 的内容。
这样就可以自定义 allowClear 功能来达到清空表单输入的目的。