Question

我有一个具有Material UI Auto建议功能的react应用。我有一个问题，当我在自动建议框中输入名称并通过向下箭头键选择建议名称时，它将被选择并将输入字段的值更改为它。 我只需要浏览建议的名称而无需选择。如果我单击建议的名称或按Enter键，则应仅选择该名称。我将“代码”沙箱示例放在这里。

https://codesandbox.io/s/tfgz5

我该如何解决？

Answer 1

在您的onChange方法中，您还会与newValue一起触发触发更改的method。参见documentation here。

这意味着您可以进行检查，以便仅在用户键入，单击或按Enter时更新状态（用于确定要显示的值）。换句话说，我们忽略由于上压或下压而发生的变化。

因此您的示例可以修改为（第155行）为

  const handleChange = name => (event, { newValue, method }) => {
    const shouldUpdateSelectedValue = method === "type" || method === "enter" || method === "click";
    shouldUpdateSelectedValue && setState({
      ...state,
      [name]: newValue,
    });
  };

您的代码的修改版本可以在这里找到：https://codesandbox.io/s/material-demo-hcmzl

Answer 2

您必须在 onBlur() 组件的 inputProps 对象上定义一个 Autosuggest 事件处理程序。下面是一个例子：

// The onBlur event handler method
const handleOnBlur = (name) => (event) => {
    if (suggestions.findIndex((s) => s.label === event.target.value) === -1) {
        setState({ ...state, [name]: "" });
        event.target.value = "";
    }
};

<Autosuggest
    {...autosuggestProps}
    inputProps={{
        onChange: handleChange("single"),
        onBlur: handleOnBlur("single") // Add this line
    }}
...


<Autosuggest
    {...autosuggestProps}
    inputProps={{
        onChange: handleChange("popper"),
        onBlur: handleOnBlur("popper") // Add this line
    }}
...

在此代码 https://codesandbox.io/s/material-demo-forked-4qidj?file=/demo.js

上找到您的代码的修改版本

如何防止Material UI自动建议中的箭头键选择行为？

2 个答案: