javascript - MUI 选择 |更改所选值在输入中的显示方式

Question

我有一个对象数组，我想在 MenuItem 中绑定(bind)对象的多个属性，但我只想显示要在 Select 中显示的单个属性。 p>

在上图中，它在选择显示中显示 10-xyz，它应该只显示 10。

const [age, setAge] = React.useState("");
  const [options, setOptions] = React.useState([
    {
      name: "xyz",
      age: "10"
    },
    { name: "xyz", age: "20" }
  ]);
  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={age}
      label="Age"
      onChange={handleChange}
    >
      {options.map((ele) => {
        return(<MenuItem value={ele.age}>
          {`${ele.age}-${ele.name}`} 
        </MenuItem>)
      })}
    </Select>
  );
}

Answer 1

使用 renderValue 属性来改变 Select 在 Input 组件中显示值的方式:

<Select renderValue={(p) => p}

您的代码中还有 2 个问题:

1. 您应该在 MenuItem 中传递一个 key 以区分列表中的每个项。参见 this以获得更多解释。

2. 如果您想为您的选择显示标签，您应该使用TextField而不是Select > 如我的其他文章所述answer .

我已经在下面的演示中解决了这两个问题。

有关引用，请参阅选择 API here .