Как предотвратить поведение выбора клавиши со стрелкой в ​​автоматическом предложении пользовательского интерфейса материала?

Question

У меня есть приложение реагирования с функцией автоматического предложения материала UI.У меня есть проблема, когда я набираю имя в поле автоматического предложения и выбираю предложенное имя с помощью клавиши со стрелкой вниз, оно будет выбрано и изменит значение поля ввода на него. Мне нужно только просмотреть предложенные имена, не выбирая его .Если я нажимаю на предложенное имя или нажимаю Enter, то нужно выбрать только его.Я поместил пример с песочницей Code здесь.

https://codesandbox.io/s/tfgz5

Как я могу решить эту проблему?

Answer 1

В вашем методе onChange вместе с newValue вам также передается method, который вызвал изменение.См. Документацию здесь .

Это означает, что вы можете проверить, чтобы вы обновляли состояние (которое используется для определения того, какое значение будет отображаться), когда пользователь печатает, нажимает или нажимаетвойти.Другими словами, мы игнорируем изменения, которые происходят из-за повышающих или понижающих нажатий.

Таким образом, ваш пример можно изменить (около строки 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