javascript - 获取选项 Material-UI React 中选择的第一个元素

Question

大家好，我正在使用 React Material UI 选择。当我更改选项时，我会触发 onChange 方法并在所选值上添加 attr，那么我如何将项目的第一个选项设置为选中状态。

       value={} **// I want to display first option to selected without trigger on Change method**
       onChange={(e) => {
            data.forEach(a => {
            if (a.Id === e.target.value) {
                 a.selected = true
               } else {
                 a.selected = false
               }
            });
       }}
     >
         <MenuItem disabled value=""><em>Please Select</em></MenuItem>
         {data.map((item) => {
               return (
                 <MenuItem key={item.Id} value={item.Id} >
                       {item.Ad}
                 </MenuItem>
               );
         })}
     </Select>

标签： javascriptreactjsmaterial-ui

Answer 1

您的组件需要 2 个状态，data并且active. data您要在下拉列表中显示的项目在哪里，并active指示当前选择的项目。通常，我们使用useEffect钩子来初始化状态。

此外，我们必须重新实现您的onChange功能。我建议您查看有关如何更新功能组件状态的文档https://reactjs.org/docs/hooks-reference.html#usestate。

---

无论如何，您可以将代码更改为此

export default function App() {
  const [data, setData] = React.useState(DATA);

  // select the first option by default
  const [active, setActive] = React.useState(DATA[0].Id);

  function onChange(event) {
    setActive(event.target.value);
  }

  return (
    <Select value={active} onChange={onChange} fullWidth>
      <MenuItem disabled value="">
        <em>Please Select</em>
      </MenuItem>
      {data.map((item) => (
        <MenuItem key={item.Id} value={item.Id}>
          {item.Ad}
        </MenuItem>
      ))}
    </Select>
  );
}

...我创建了一个代码框供您试用。