Блог

У меня есть управляемый компонент текстового поля Material-UI, который получает свое значение из состояния родительского компонента. Я не могу получить значение для обновления без потери фокуса текстового поля. Любая помощь будет признательна

 export function OtherApp() {

    const [stateArray, setStateArray] = useState([{name: 'first', value: 'val'}, {name: 'second', value: 'val'}])

    const changeHandler = (e, i) => {
        let state = stateArray;
        state[i].name = e.target.value;
        setStateArray(state);
        console.dir(state);
    }

    return (
        <div>
            {stateArray.map((el, i) => {
                return (
                    <TextField
                        fullWidth
                        id={`section-${i}-namet`}
                        key={`section-${i}-namet`}
                        value={stateArray[i].name}
                        helperText='Helper Text'
                        onChange={e => changeHandler(e, i)}
                    />
                )
            })}
        </div>
    )
}
 

Всегда рекомендуется клонировать состояние перед обновлением. Попробуйте добавить приведенный ниже код в функцию обработчика изменений

 const changeHandler = (e, i) => {
  let state = [...stateArray];
  ...
}