reactjs - MUI Select 组件中的自定义文本

Question

我在 React 应用程序中使用 MUI Select，用户可以从列表中选择一个选项。但是，要求用户可以在 MUI Select 中添加自定义文本来创建新选项。

任何人都可以帮助如何实现同样的目标。在 MUI Select 组件中添加自定义文本。

Answer 1

使用 Select 不可能做到这一点，但您可以使用 Autocomplete 组件来做到这一点。方法如下:

• 控制输入值和选项
• 检测用户是否按下了Enter，并在选项列表中添加新选项

示例

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" &&
              options.findIndex((o) => o.title === inputValue) === -1
            ) {
              setOptions((o) => o.concat({ title: inputValue }));
            }
          }}
        />
      )}
    />
  );
}

现场演示