Управление textfield через 2 независимых selectora (Material UI)

Question

У меня есть компонент в котором будет использоваться два Select и TextField из Material Ui. Как можно сделать так, чтобы если пользователь выбрал в селект 1 ответ А и селект 2 ответ Б, в TextField подставлялось бы первое значение из подготовленного const answer = ["123", "321"]. В другом случае селект 1 ответ В и селект 2 ответ Г вставлялось бы второе значение из того же массива. В противном случае TextField пустой. И в любом случае его можно заполнять и редактировать.

Собственно, нужна функция для onChange у TextField, которая будет реагировать на 2 комбинации из селектов, иначе поле просто записывать

Здесь примерная версия как я хотел бы реализовать onCnange. Очень виснет sandbox поэтому на коленке сделано

https://codesandbox.io/s/material-demo-forked-g298x

Answer 1

Проще всего создать состояние для каждого элемента, и при изменении состояний(useEffect) селектов делать проверку и по условию менять состояние текстового поля.

export default function CustomizedSelects() {
  const classes = useStyles();
  let [firstSelect, setFirstSelect] = React.useState('');
  let [secondSelect, setSecondSelect] = React.useState('');
  let [age, setAge] = React.useState('');

  useEffect(() => {
    if(firstSelect===10 && secondSelect === 40){
      setAge("Десять")
    }
  }, [firstSelect, secondSelect]);

  const handleChangeFirstSelect = (event) => {
    setFirstSelect(+event.target.value)
    }
  const handleChangeSecondSelect = (event) => {
    setSecondSelect(+event.target.value)    
    }
  // cosnt handleChnage2

  return (
    <div>
      <FormControl className={classes.margin}>
        <InputLabel htmlFor="demo-customized-textbox"
          value={age}
        >{age}</InputLabel>
        <BootstrapInput  id="demo-customized-textbox" />
      </FormControl>
      <FormControl className={classes.margin}>
        <InputLabel id="demo-customized-select-label">Age</InputLabel>
        <Select
          labelId="demo-customized-select-label"
          id="demo-customized-select"
          value={firstSelect}
          onChange={handleChangeFirstSelect}
          input={<BootstrapInput />}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
      <FormControl className={classes.margin}>
        <InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
        <NativeSelect
          id="demo-customized-select-native"
          value={secondSelect}
          onChange={handleChangeSecondSelect}
          input={<BootstrapInput />}
        >
          <option aria-label="None" value="" />
          <option value={40}>40</option>
          <option value={50}>50</option>
          <option value={60}>60</option>
        </NativeSelect>
      </FormControl>
    </div>
  );
}

БЛОГ НА HUSL

Управление textfield через 2 независимых selectora (Material UI)

Ответы (1 шт):