小编Pri*_*abi的帖子

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

我有一个对象数组,我想绑定对象的多个属性MenuItem,但我只想显示要显示的单个属性Select

在此输入图像描述

在上图中,它在选择显示中显示 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>
  );
}
Run Code Online (Sandbox Code Playgroud)

html javascript reactjs material-ui

3
推荐指数
1
解决办法
9512
查看次数

标签 统计

html ×1

javascript ×1

material-ui ×1

reactjs ×1