Can I custom allowClear function on Antd Form?

Question

Hello, I have a need to customize a function on the clear field in the Antd Input form. Besides being able to clear the field, I want to add something for example reloading the page or something.

Can the allowClear function in Antd be customised? or if not, is there a best solution for this case? Thank you

Answer 1

Check the following example

allowClear={{ clearIcon: <CloseOutlined onClick={ onFieldClear } />

App.tsx

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Input } from "antd";
import { CloseOutlined } from "@ant-design/icons";

const App: React.FC = () => {
  
  const onFieldClear = () => {
    console.log("reload page or do something...");
  };

  return (
    <>
      <Input
        placeholder="input with clear icon"
        allowClear={{ clearIcon: <CloseOutlined onClick={ onFieldClear } /> }}
      />
    </>
  );
};

export default App;