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

Question

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

Answer 1

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

...
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();
   }}
/>
...

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

How can I add an event listener to the ReactJS Material-UI autocomplete clear button?

reactjs

autocomplete

material-ui