能否自定义Antd Form中Input的allowClear函数？求最佳方案

Antd的allowClear属性仅支持布尔值，没法直接传入自定义函数扩展清除行为，但有两种实用方案满足你的需求：

方案一：利用onClear回调（推荐，Antd 4.12.0+适用） #

从Antd 4.12.0版本开始，Input组件新增了onClear事件，点击默认清除按钮时会触发这个回调，你可以在这里添加额外操作：

import { Input } from 'antd';

const MyInput = () => {
  const handleClear = () => {
    // 这里写你的额外操作，比如刷新页面
    window.location.reload();
  };

  return (
    <Input
      allowClear={true}
      onClear={handleClear}
      placeholder="请输入内容"
    />
  );
};

export default MyInput;

方案二：自定义清除按钮（兼容低版本Antd） #

如果你的Antd版本低于4.12.0，没有onClear属性，可以自己实现清除按钮，替换默认的清除功能：

import { Input, Button } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { useState } from 'react';

const MyInput = () => {
  const [inputValue, setInputValue] = useState('');

  const handleClear = () => {
    setInputValue(''); // 清除输入内容
    // 执行额外操作，比如刷新页面
    window.location.reload();
  };

  return (
    <Input
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      placeholder="请输入内容"
      suffix={
        inputValue && (
          <Button
            type="text"
            icon={<CloseOutlined />}
            onClick={handleClear}
            style={{ marginRight: -12 }}
          />
        )
      }
    />
  );
};

export default MyInput;

内容的提问来源于stack exchange，提问作者Chandra Perdiansyah