MUI Select 组件中的自定义文本答案

【问题标题】：Custom text in MUI Select componentMUI Select 组件中的自定义文本
【发布时间】：2021-03-22 16:03:09
【问题描述】：

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

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

现场演示

【讨论】：