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

【问题标题】：get first element selected in options Material-UI React获取选项 Material-UI React 中选择的第一个元素
【发布时间】：2020-11-26 18:06:46
【问题描述】：

大家好，我正在使用 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>

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案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>
  );
}

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

【讨论】：