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

Question

Hello guys I'm using React Material UI select. When I change option I trigger onChange method and add attr on selected value so how can I set fisrt option of items as selected.

       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>

Answer 1

You need 2 states on your component, data and active . Where data is the items you want to display on the dropdown, and active which indicates what item is currently selected. Commonly, we use useEffect hook to initialize states.

Also, wehave to re-implement your onChange function. I suggest you review the docs on how to update states on functional component https://reactjs.org/docs/hooks-reference.html#usestate .

---

Anyway, you can change your code to this

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>
  );
}

...and I created a codesandbox for you to try it out.