получить первый элемент, выбранный в опциях Material-UI React

Question

Привет, ребята, я использую выбор пользовательского интерфейса React Material. Когда я меняю параметр, я запускаю метод 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>

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

... и я создал кодовый ящик, чтобы вы могли его опробовать.

Редактировать очаровательный-dewdney-llw8r