antd Input监听clear的点击事件

313 阅读1分钟

背景

由于antd并没有提供clear方法的回调.需要想办法获取回调时机,以下是我的办法

解决代码:

    import React, { useRef } from "react";
    import { Input } from "antd";

    const App: React.FC = () => {
        const textCache = useRef('');
        const onChange = (
            e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
        ) => {
            // 点击clear事件后
            if (e.type === "click") {
                console.log('点击clear之前输入的内容',textCache.current);
            }
            textCache.current = e.target.value;
        };

        return (
            <Input
                placeholder="input with clear icon"
                allowClear
                onChange={onChange}
            />
        );
    };
        
    export default App;

解析

点击的clear的时候,e.type会输出'click',并且e.target.value会变成'',所以要想获得点击clear之前输入的内容,那么需要加缓存记录