如何将事件侦听器添加到 ReactJS Material-UI 自动完成清除按钮？

【问题标题】：How can I add an event listener to the ReactJS Material-UI autocomplete clear button?如何将事件侦听器添加到 ReactJS Material-UI 自动完成清除按钮？
【发布时间】：2021-09-11 22:57:49
【问题描述】：

ReactJS/Material-UI 新手问题。我正在尝试向 Material-UI 自动完成清除按钮添加一个事件侦听器，如下面的快照所示。我了解 Material-UI Autocomplete 已经有 onChange 和 onInputChange 事件侦听器，但我需要添加一个专门用于单击清除按钮 (X) 的函数。关于我如何能够实现这一目标的任何指示？这是 Material-UI 自动完成代码的链接https://codesandbox.io/s/97u43?file=/demo.js

【问题讨论】：

标签： reactjs autocomplete material-ui

【解决方案1】：

根据带有Autocomplete API onChange 事件的 Material UI 文档，您有三个参数

...
onChange={(event, value, reason) => {
    console.log('event: ', event);
    console.log('reason: ', reason);
}}
...

考虑到这一点，第三个对您来说很重要，因此可用值是：

reason: One of "create-option", "select-option", "remove-option", "blur" or "clear".

使用该验证来检查用户是否清除了选项

...

function onClear() {
    alert('you pressed clear');
}

<Autocomplete
   multiple
   onChange={(event, value, reason) => {
     console.log('event: ', event);
     console.log('reason: ', reason);

     if (reason === 'clear') onClear();
   }}
/>
...

【讨论】：

非常感谢维托！我在文档中完全忽略了这一点。
@sybercoda 别担心，伙计！我们有时都会这样做，希望你能实现你所需要的:)