React Material UI 自动完成事件监听器问题答案

【问题标题】：React Material UI Autocomplete event listener issueReact Material UI 自动完成事件监听器问题
【发布时间】：2020-06-12 18:55:58
【问题描述】：

我正在尝试设置 Material UI 的自动完成组件，以便当您点击选项卡时它会自动选择最接近的匹配项。然后，根据输入，我需要捕获 e.target.value。但是，它似乎只传递了手动输入的字符串而没有自动完成的字符串。例如，如果我键入“Ba”并使用 Tab 键完成“Banana”，则只有“Ba”作为值传递。 Here is a sandbox 我正在尝试实现的内容。

我还意识到，当我单击使用下拉菜单（而不是通过键盘手动输入值）时，它甚至无法创建我所追求的值。对此的任何帮助也非常感谢。谢谢！

【问题讨论】：

嗨@Georg，你提供的沙箱对我来说很好用。当我键入“Ba”和选项卡时，但 value 和 inputValue 设置为“Banana”？我正在使用谷歌浏览器。
嗨@Hangindev，感谢您的快速回复。对不起，我可能不是很清楚。 value 和 inputValue 在 Google Chrome 上对我来说也很好。但是，各种 e.targets 和 e.target.values 的控制台日志并没有给我我想要的东西。本质上，我试图将 e 中的 value/inputValue 中的内容传递给 handleChange 函数。
我明白了。感谢您的澄清。请问onChange函数中为什么要使用e.target.value而不是value参数？
我有一个将e 作为参数之一的handleChange 函数。然后使用e.target.name 和e.target.value 更新另一个组件中的状态。
我明白了。由于value 参数是您想要的值，我的建议是使用value 参数创建一个适合handleChange 签名的对象，例如{ target: { name: e.target.name, value: newValue } } 或更新 handleChange 函数。希望您最终能找到解决方案或其他人可以提供帮助！

标签： javascript reactjs autocomplete material-ui

【解决方案1】：

您可以使用 onChange 函数的 value 参数创建一个符合 handleChange 签名的对象，即

<Autocomplete
  onChange={(event, value) => {
    handleChange({
      target: {
        name: event.target.name,
        value,
      },
    });
  }}
  ...

或更新handleChange 函数。

【讨论】：