Reactjs 如何在Material UI TextField组件中的关闭图标上添加自定义处理程序？

我在Reactjs/Typescript项目中使用MaterialUI，在该项目中，我使用TextField呈现搜索输入组件

“x”图标内置于组件中，用于清除输入上的值。但是，我希望创建自己的自定义处理程序，以便在删除搜索值时进行api调用

我查看了组件和组件API文档，但没有发现任何有用的东西。还有一个答案是使用浏览器api获取x元素并添加事件侦听器，但是如果可能的话，我希望避免直接操作DOM

event.target.value！==" " && 
setSearchValue（event.target.value）}
onKeyPress={（）=>{}
/>

我认为下面的内容可能会有所帮助。当输入为空时，它将调用业务逻辑/API函数

const handleChange=async（事件）=>{
setSearchValue（事件.目标.值）
//这里的API调用
如果（！event.target.value）{
const response=wait api.get（）；
}
}

I refered-，默认情况下，

X

图标不会出现。你能检查一下你是否在

TextField

上面有一个层或者类似的东西吗？找出图标出现的原因-这是因为

type=“search”

。我认为，如果您想在

X

图标单击上使用一个处理程序，您可以使用

type=“text”

并使用

输入设置
prop
，其中可以传递
图标或
X
的字符。这里有更多关于它的信息-是的，这是因为type=“search”prop，我想我现在想保留默认外观，而不是添加装饰。我想，你能做的最好的事情就是检查
handleChange
中的
值是否为
空
，并相应地进行API调用或任何你想要的额外逻辑？单击
X
也应该触发
handleChange
和
“
值，我猜。@jaybhatt似乎做到了这一点，我可以/应该调用setSearchValue回调中的异步函数。我有这个方法，但我认为你的答案更好`setState（（prevState）=>{if（prevState.length>event.target.value.length）{handleClear（）；}return event.target.value；}）；`我认为在您输入的代码段中，如果某些用户同时选择并删除字符，它可能会清除所有内容。
<TextField
    id="outlined-search"
    label="Search users"
    type="search"
    variant="outlined"
    style={{ width: '40ch' }}
    value={searchValue}
    inputRef={textRef}
    onChange={(event: React.ChangeEvent<HTMLInputElement>) => event.target.value !== " " && 
                      setSearchValue(event.target.value)}
    onKeyPress={() => {}}
/>