从材质 ui 处理自动完成组件上的单击和更改

Question

我一直在尝试获取一个自动完成组件，以在用户键入并单击自动完成列表中的项目时保存状态。我正在尝试使用此状态过滤我的表。目前，我的表格正在过滤，因为将数据输入到文本字段中，而不是在单击项目时进行过滤。

这是我的自动完成和文本字段：

这是我的表：

这是我的界面：

任何帮助都会很棒，谢谢

Answer 1

您应该将 onChange 事件从 textarea 移动到 Autocomplete 本身。在您输入时过滤它可能不是最好的主意，因为它会在您输入时发生，但您可能希望它在您实际选择一个选项时发生。

如果您输入国家/地区名称而不选择它，则拥有 autoSelect 属性也会有所帮助。

<Autocomplete
   onChange={(event, newValue) => {
      setSearchTerm(newValue)
   }}
   autoSelect
/>