可以通过自定义控件的render方法,覆盖Antd Form默认的控件。例如,我们可以自定义一个Select控件,并在render方法中处理allowClear逻辑:
import React from 'react';
import { Select } from 'antd';
class CustomSelect extends React.Component {
handleChange = (value) => {
const { onChange } = this.props;
onChange(value);
}
handleClear = () => {
const { onChange } = this.props;
onChange(undefined);
}
render() {
const { allowClear, ...otherProps } = this.props;
return (
);
}
}
export default CustomSelect;
这里我们定义了一个CustomSelect控件,继承自Antd的Select控件,并在render方法中处理了allowClear逻辑。我们自己处理了control的onChange方法和onClear方法,当用户点击清空图标时,调用onClear方法,并将value设置为undefined。
之后在Form中使用CustomSelect控件即可:
Option 1
Option 2