MUI 選擇 | 更改所選值在輸入中的顯示方式

Question

我有一個對象數組，我想在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>
  );
}

Answer 1

使用renderValue更改Select應如何在Input組件中顯示值：

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

您的代碼中還有兩個問題：

1. 您應該在MenuItem傳遞一個key以區分列表中的每一個。 有關更多解釋，請參閱this 。

2. 如果要按照我的其他答案中的說明為Select顯示label ，則應使用TextField而不是Select 。

我已經在下面的演示中解決了這兩個問題。

如需參考，請參閱此處的Select API。

Answer 2

您在返回中連接兩個鍵：

切換自：

{`${ele.age}-${ele.name}`}

對此：

{`${ele.age}`}