在 Mui Autocomplete 中如何在选择一个选项后调用一个函数（不是同时）

Question

完成后：

点击 Autocomplete 输入
使用 arrow 键在选项之间移动
通过按 enter 键选择一个选项

我想再次按 enter 键来调用一个函数，但我不知道该怎么做。

我尝试在 Autocomplete 的输入上使用 onKeyDown 事件，但是通过在按下 enter 时选择一个值，它也会调用该函数。

Answer 1

您可以在 MUI 自动完成中使用 onChange 属性。喜欢：-

<Autocomplete
      disablePortal
      id="combo-box-demo"
      options={[]}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
      onChange={()=>console.log("changed")}
    />

Answer 2

我找到了我要实现的此功能的解决方法：

我为 Autocomplete 保持 isOpen 状态，并使用 onClose 和 onOpen 事件来更改 isOpen 并在输入 I 中按下按键检查密钥代码是否为 Enter 并且 isOpen 是否为 false 然后我调用我想要的方法：


const [isOpen, setIsOpen] = useState(false);
...

<Autocomplete
      renderInput={(params) => <TextField onKeyDown={(e)=> { 
          if(e.key === 'Enter' && !isOpen) filter()
        } />
      }
      onOpen={()=>setIsOpen(true)}
      onClose={()=>setIsOpen(false)}
    />

在 Mui Autocomplete 中如何在选择一个选项后调用一个函数（不是同时）

In Mui Autocomplete how to call a function after selecting an option (not simultaneously)

reactjs

material-ui

autocomplete