如何确定用户是否正在使用箭头键滚动选择 Material-UI 自动完成？

Question

我在 ReactJS 应用程序中有一个 material UI 自动完成组件，我希望它具有以下行为：

用户可以在自动完成中键入输入，当用户按下回车键而不滚动浏览建议的选项时，将触发事件 A，并将在自动完成中键入的输入作为参数。
用户可以滚动浏览建议的选项（使用箭头键），当用户按下回车键时，事件 B 将被触发，并显示参数中当前选定的自动完成选项
用户可以滚动浏览建议的选项（使用箭头 keys/mouse 滚动器），当用户单击其中一个建议时，事件 B 将被触发，并在参数中单击自动完成选项

我能够单独做出这些行为。我用等待回车键的 onKeyDown 处理了第一个行为，用这里建议的 onChange 处理了第二个和第三个行为： .

当我将两个事件放在一起时出现问题。当我尝试使用箭头键滚动选项并按下回车键（行为 2）时，onKeyDown 和 onChange 事件都会被触发。当我只想用用户选择的内容触发事件 B 时，这会用用户键入的内容触发事件 A，并用用户选择的内容触发事件 B。有没有一种方法可以检测用户是否已经开始使用箭头键滚动浏览自动完成建议（以便我可以将事件 A 包装在 if 条件中），或者查看此问题以解决它的替代方法？

自动完成组件：

<Autocomplete options={someArrayOfStrings}
                            onChange={this.submitComment} // event B
                            onKeyDown={this.submitCommentEnter} // event A
                            value={this.state.userInput} // what the user has typed
                            autoComplete
                            freeSolo
                            renderInput={(params) => <TextField {...params}
                                                                fullWidth
                                                                label="Search"                                                           
                                                                variant="outlined"/>}/>

事件 A（提交评论输入）：

submitCommentEnter(e) {
        if (e.key == 'Enter') { // possibly add check if user is scrolling through autocomplete with arrow keys here?
            /* content of event A here; uses this.state.userInput */
        }
    }

事件 B（提交评论）：

submitComment(event, value) {
        if (value !== null) {
            /* content of event B here; uses value */
        }
    }

Answer 1

你不需要处理 keyDown 事件，你只需要使用 on-change 事件的原因，根据文档 onChange 提供三个参数

 onChange={(event, value, reason) => {
          console.log("onChange", reason, value, event.currentTarget);
 }}

原因有5种"create-option", "select-option", "remove-option", "blur" or "clear"。当您在文本字段中按回车键时，原因将是 create-option，当您从下拉列表中选择 select 时，原因将是 select-options，下面是验证事实的完整代码。

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

const someArrayOfStrings = ["test", "test2", "test3"];

export default function CheckboxesTags() {
  const [selectedValues, setSelectedValues] = React.useState();
  return (
    <React.Fragment>
      <Autocomplete
        options={someArrayOfStrings}
        onChange={(event, value, reason) => {
          console.log("onChange", reason, value, event.currentTarget);
          // setSelectedValues(value);
        }}
        value={selectedValues} // what the user has typed
        autoComplete
        freeSolo
        renderInput={params => (
          <TextField {...params} fullWidth label="Search" variant="outlined" />
        )}
      />
    </React.Fragment>
  );
}

我还创建了这个 code-sandbox project，您可以在其中查看控制台

如何确定用户是否正在使用箭头键滚动选择 Material-UI 自动完成？

How to determine if user is scrolling through choices of Material-UI Autocomplete with arrow keys?

reactjs

autocomplete

material-ui

onchange

onkeydown