如何正确设置三个BasicSelect的State来对产品进行排序？

Question

问题是所选项目未显示在输入字段中。

export default function BasicSelect() {
  const [sortBy, setSortBy] = useState("");
  const [condition, setCondition] = useState("");
  const [delivery, setDelivery] = useState("");

  function handleChange(event) {
    const { value, id } = event.target;

    if (id === "sortBySelect") {
      setSortBy(value);
    } else if (id === "conditionSelect") {
      setCondition(value);
    } else if (id === "deliverySelect") {
      setDelivery(value);
    }
  }

  return (
    <Stack direction="row" spacing={2}>
      <FormControl sx={{ minWidth: "136px" }}>
        <InputLabel id="sortBylabel">Sort By</InputLabel>
        <Select
          labelId="sortBylabel"
          id="sortBySelect"
          value={sortBy}
          label="Sort By"
          onChange={handleChange}
        >
          <MenuItem value={1}>The cheapest</MenuItem>
          <MenuItem value={2}>The most expensive</MenuItem>
          <MenuItem value={3}>Top-rated</MenuItem>
        </Select>
      </FormControl>
      <FormControl sx={{ minWidth: "136px" }}>
        <InputLabel id="conditionLabel">Condition</InputLabel>
        <Select
          labelId="conditionLabel"
          id="conditionSelect"
          value={condition}
          label="Condition"
          onChange={handleChange}
        >
          <MenuItem value={4}></MenuItem>
          <MenuItem value={5}></MenuItem>
          <MenuItem value={6}></MenuItem>
        </Select>
      </FormControl>
      <FormControl sx={{ minWidth: "136px" }}>
        <InputLabel id="deliveryLabel">Delivery</InputLabel>
        <Select
          labelId="deliveryLabel"
          id="deliverySelect"
          value={delivery}
          label="Delivery"
          onChange={handleChange}
        >
          <MenuItem value={7}></MenuItem>
          <MenuItem value={8}></MenuItem>
          <MenuItem value={9}></MenuItem>
        </Select>
      </FormControl>
    </Stack>
  );
}

我认为我需要添加另一个状态来将所选项目存储在

<Inputlabel />

中，但我在创建条件时迷失了 - 如何存储

MenuItem

的“名称”，因为该值不等于名称（MUI 演示代码中也有内容）

Answer 1

听起来您正在尝试将选择输入中的值映射到对象。 要以支持本机选择的方式执行此操作，您需要确保选择的值仍然是字符串，并单独记录哪些字符串值映射到哪些对象。

实现此目的的一种方法是保留选择应映射到的可能对象的列表。

即获取一个列表

items

，在其上进行映射以创建可能的选择选项，然后使用

Array.find

访问所选对象。

export default function Example() {
  const [value, setValue] = React.useState('');
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  const items = [
    {
      value: 'foo',
      label: 'Foo',
    },
    {
      value: 'bar',
      label: 'Bar',
    },
  ];
  const selectedItem = items.find(item => item.value === value);
  return (
    <div>
      <FormControl sx={{ m: 1 }} variant="standard">
        <InputLabel id="example-label-id">Value</InputLabel>
        <Select
          id="example-input-id"
          value={value}
          onChange={handleChange}
          label="Value"
        >
          <MenuItem value="">
            <em>Not selected</em>
          </MenuItem>
          {items.map((item) => (
            <MenuItem key={item.value} value={item.value}>
              {item.label}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
      <pre>
        {JSON.stringify(selectedItem, null, 2)}
      </pre>
    </div>
  );
}