MUI 自动完成单个数组

Question

我正在尝试在 Reactjs 的 MUI 自动完成中应用 Add xyx 的原则，使用单一维度，即 [1,2,3,4,5]，即没有对象，到目前为止，我只有对象的示例和参考.有什么方法可以实现吗，作为参考我正在尝试仅使用单个数组来实现 this，我想要 Add <YOUR_SEARCH_TERM> 选项，到目前为止我只有输入搜索词，我想要附加 Add 作为前缀，但如果我添加 Add，它也会反映在输入框中。

Answer 1

有一种方法可以实现这一点。请查看您链接的 Code Sandbox example I created. I modified the Material UI example。

在此示例中，选项是数组中的数字，而不是对象，即 [0, 1, 2, 3, 4, 5]。

分为三个步骤：

为了在过滤选项中包含对 Add 用户输入的建议，我们推送带有 Add 前缀的用户输入。

filterOptions={(options, params) => {
  const filtered = filter(options, params);

  const { inputValue } = params;
  // Suggest the creation of a new value
  const isExisting = options.some((option) => inputValue === option);
  if (inputValue !== "" && !isExisting) {
    filtered.push(`Add ${inputValue}`);
  }

  return filtered;
}}

正如您正确指出的，如果您select这个，Add前缀也会出现在输入框中。比如我们selectAdd 6，输入框就会显示Add 6。我们只想显示 6.

我们可以通过在 getOptionLabel 中添加一个 replace 来实现功能。这控制选项的呈现方式。我们来了用空字符串替换我们 select 编辑的选项中的 Add 。这将删除 Add 前缀和前缀与之间的 space 输入。例如，不显示 Add 6，只显示 6 将显示。

getOptionLabel={(option) => {
  // Value selected with enter, right from the input
  if (typeof option === "string") {
    const updatedOption = option.replace("Add ", "");
    return updatedOption;
  }
  // Add "xxx" option created dynamically
  if (option.inputValue) {
    return option.inputValue;
  }
  // Regular option
  return option.toString();
}}

当我们在 onChange 函数中 setValue 时，我们也不想保存带有 Add 前缀的值。和第2步类似，我们要在onChange函数中加一个replace，去掉Add前缀。

onChange={(event, newValue) => {
  if (typeof newValue === "string") {
    const updatedValue = newValue.replace("Add ", "");
    setValue(updatedValue);
  } else if (newValue && newValue.inputValue) {
    // Create a new value from the user input
    setValue(newValue.inputValue);
  } else {
    setValue(newValue);
  }
}}

总而言之：

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete";
import "./styles.css";

const numbers = [0, 1, 2, 3, 4, 5];
const filter = createFilterOptions();

export default function App() {
  const [value, setValue] = React.useState(null);

  return (
    <div className="App">
      <Autocomplete
        value={value}
        onChange={(event, newValue) => {
          if (typeof newValue === "string") {
            const updatedValue = newValue.replace("Add ", "");
            setValue(updatedValue);
          } else if (newValue && newValue.inputValue) {
            // Create a new value from the user input
            setValue(newValue.inputValue);
          } else {
            setValue(newValue);
          }
        }}
        filterOptions={(options, params) => {
          const filtered = filter(options, params);

          const { inputValue } = params;
          // Suggest the creation of a new value
          const isExisting = options.some((option) => inputValue === option);
          if (inputValue !== "" && !isExisting) {
            filtered.push(`Add ${inputValue}`);
          }

          return filtered;
        }}
        selectOnFocus
        clearOnBlur
        handleHomeEndKeys
        id="free-solo-with-text-demo"
        options={numbers}
        getOptionLabel={(option) => {
          // Value selected with enter, right from the input
          if (typeof option === "string") {
            const updatedOption = option.replace("Add ", "");
            return updatedOption;
          }
          // Add "xxx" option created dynamically
          if (option.inputValue) {
            return option.inputValue;
          }
          // Regular option
          return option.toString();
        }}
        renderOption={(props, option) => <li {...props}>{option}</li>}
        sx={{ width: 300 }}
        freeSolo
        renderInput={(params) => (
          <TextField {...params} label="Array of numbers demo" />
        )}
      />
    </div>
  );
}

MUI 自动完成单个数组

MUI Autocomplete single array

reactjs

material-ui