Всем привет. Есть 3 инпута, в первые 2 инпута можно

Question

Всем привет. Есть 3 инпута, в первые 2 инпута можно

ввести данные, 3-ий формируется из вычислений первых. Вопрос: как можно следить за изменением состояния третьего?
Повесил функцию на onChange - но не срабатывает. Может есть какой-то другой event?

#frontend #javascript #programming #react.js #russian

0

29.01.2021

28 ответов

4 просмотра

Semyon Porot Автор вопроса

eden lane
В useMemo можно запихнуть первые две зависимости, ...

Хммм... А если полей много? 🤔

0

29.01.2021

eden lane

Semyon Porot

Хммм... А если полей много? 🤔

Сделать три поля отдельным компонентом и внутри уже разруливать. А в компонент модель прокинуть коллбэк, если эти значения снаружи нужны

0

29.01.2021

Roman Tikhiy

Так третий рид онли вычисляемый или его можно менять? тогда как первые два должны на это реагировать?

0

29.01.2021

Semyon Porot Автор вопроса

Roman Tikhiy
Так третий рид онли вычисляемый или его можно меня...

readOnly вычисляемый - вы правы

0

29.01.2021

Roman Tikhiy

Semyon Porot
readOnly вычисляемый - вы правы

Тогда я не понимаю условия задачи

0

29.01.2021

Semyon Porot Автор вопроса

Roman Tikhiy
Тогда я не понимаю условия задачи

Любой из первых двух инпутов изменяем - третий меняется автоматом, onChange не срабатывает на нём Вычисление первых двух подставляю в value третьего инпута

0

29.01.2021

Roman Tikhiy

Semyon Porot
Любой из первых двух инпутов изменяем - третий мен...

Нужен код, так не понятно

0

29.01.2021

Semyon Porot Автор вопроса

Roman Tikhiy
Нужен код, так не понятно

const [alertState, setAlertState] = useState(false); const onChange = (e) => { if (e.target.value < 0) setAlertState(true) } <> <StyledTableCell align="center"> <TextField inputRef={register({ required: true })} inputProps={{ min: 0 }} type="number" error={error} variant="outlined" /> </StyledTableCell> <StyledTableCell align="center"> <TextField inputRef={register({ required: true })} inputProps={{ min: 0 }} type="number" error={error2} variant="outlined" /> </StyledTableCell> <StyledTableCell align="center"> <TextField inputRef={register({ required: true })} inputProps={{ readOnly: true }} type="number" onChange={onChange} value={fields[row.meta_label_id].plan - fields[row.meta_label_id].fact} /> </StyledTableCell> </>;

0

29.01.2021

Roman Tikhiy

Semyon Porot
const [alertState, setAlertState] = useState(false...

react-hook-form имеет метод watch, если это он

0

29.01.2021

Semyon Porot Автор вопроса

Semyon Porot
const [alertState, setAlertState] = useState(false...

const fields = watch();

0

29.01.2021