MUI Autocomplete: Как предотвратить открытие на фокусе, вместо того, чтобы открыть при изменении ввода?

Question

Я пытаюсь остановить автозаполнение от открытия предложений, как только пользователь нажимает. Я бы хотел, чтобы он открывался только тогда, когда пользователь начинает печатать. Кажется, нет опоры для достижения этой цели. Может ли быть способ использовать onInputChange для переключения автозаполнения 'open' prop (bool). Спасибо

Answer 1

Да, вы можете явно управлять реквизитом open, и если вы хотите основать его на том, что пользователь что-то набрал, то я рекомендую вам также явно контролировать реквизит inputValue.

Ниже приведен рабочий пример одного из способов сделать это. Это указывает на реквизиты onOpen, onClose, onInputChange, open и inputValue в дополнение к обычно указанным реквизитам.

• onOpen будет получать , вызываемый Material-UI всякий раз, когда он думает open должно быть установлено на true. handleOpen в приведенном ниже примере игнорирует это событие, когда inputValue пусто.
• onClose будет вызывать , вызванный Material-UI всякий раз, когда он считает, что open должно быть установлено до false. В приведенном ниже примере безусловно вызывается setOpen(false), так что он все еще закрывается во всех тех же сценариях ios, что и в поведении по умолчанию.
• handleInputChange в приведенном ниже примере, в дополнение к управлению состоянием inputValue , переключает состояние open в зависимости от того, является ли значение пустым.

/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  const [inputValue, setInputValue] = React.useState("");
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => {
    if (inputValue.length > 0) {
      setOpen(true);
    }
  };
  const handleInputChange = (event, newInputValue) => {
    setInputValue(newInputValue);
    if (newInputValue.length > 0) {
      setOpen(true);
    } else {
      setOpen(false);
    }
  };
  return (
    <Autocomplete
      id="combo-box-demo"
      open={open}
      onOpen={handleOpen}
      onClose={() => setOpen(false)}
      inputValue={inputValue}
      onInputChange={handleInputChange}
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 }
// and many more options
];