Блог

Я использую MUI Select в своем приложении React, где пользователь может выбрать один из вариантов из списка. Однако существует требование, при котором пользователь может добавить пользовательский текст в MUI Select для создания новой опции.

Может ли кто-нибудь помочь, как добиться того же самого. Добавление пользовательского текста в Select компонент MUI.

Это невозможно с Select помощью, но вы можете сделать это с помощью Autocomplete компонента. Вот как:

• Возьмите под контроль входное значение и параметры
• Определите, нажал ли пользовательEnter, и добавьте новую опцию в options список

Пример

 const initialOptions = [
  { title: "The Shawshank Redemption" },
  { title: "The Godfather" },
  { title: "The Godfather: Part II" }
];
 

 function App() {
  const [inputValue, setInputValue] = React.useState("");
  const [options, setOptions] = React.useState(initialOptions);

  return (
    <Autocomplete
      options={options}
      noOptionsText="Enter to create a new option"
      getOptionLabel={(option) => option.title}
      onInputChange={(e, newValue) => {
        setInputValue(newValue);
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Select"
          variant="outlined"
          onKeyDown={(e) => {
            if (
              e.key === "Enter" amp;amp;
              options.findIndex((o) => o.title === inputValue) === -1
            ) {
              setOptions((o) => o.concat({ title: inputValue }));
            }
          }}
        />
      )}
    />
  );
}
 

Живая демонстрация