Как установить разные значения для выбора разных материалов, используя состояния в функциональной составляющей реакции

Question

Я новичок в реакции и использую поле выбора дизайна материала, https://material-ui.com/components/selects/

в поле простого выбора доступно несколько полей выбора, но когда я выбираю один вариант блока выбора, все остальные поля установлены с тем же выбранным значением. ниже приведен пример https://codesandbox.io/s/yk15u

Я хочу установить значение параметра в поле выбора, когда нажимаю на него. Предоставить соответствующее решение

Answer 1

Вы должны хранить значение отдельно, в примере, если все Select снабжены пропеллером value={age}. Таким образом, все поля указывают на одно и то же состояние для значения.

1. Сделайте состояние возраста объектом вместо строки

const initialState = {
 select1: '',
 select2: '',
 ...
};
const [age, setAge] = React.useState(initialState); 

Передать идентификатор для handleChange в select и установить соответствующий value из ages prop.

<Select
 labelId="demo-simple-select-label"
 id="demo-simple-select"
 value={ages.select1}
 onChange={(e) => handleChange(e, 'select1')}
>
....
</Select>

Сетевое состояние select, которое вызвало handleChange

const handleChange = (event, name) => {
  const newAge = {...age, [name]: event.tatget.value};
  setAge(newAge);
};