Mesuti
@Mesuti

Как правильно изменять value в input с помощью React?

Привет!
Запутался в Контролируемых компонентах.

https://codesandbox.io/s/cranky-bogdan-cwyh0?file=...

Есть простой input1 и input2 в виде компонента

При изменении input1, его value должен указываться внутри поля input2
При изменении input2, его value просто сохраняется в state

Проблема в том, что React говорит нужно использовать только defaultValue, а если принудительно указывать value={state}, то выдает ошибку управляемости компонента

Как правильно из одного input передавать value в другой input ?
Через ref не хочется, поскольку в документации говорится, что это самый крайний случай

p.s. В документации указано про контролируемые компоненты, но в примерах только вывод input.value в любом другом блоке, кроме другого input,
  • Вопрос задан
  • 1419 просмотров
Решения вопроса 1
@gsaw
import { useEffect, useState } from "react";

export default function MyComponent() {
    const  [val1, setVal1]  = useState();
    const  [val2, setVal2]  = useState();
    
    useEffect(() => setVal2(val1),[val1]);

   return <>
             <input type="text" value={val1} onChange={(ev) => setVal1(ev.target.value)} />
             <input type="text" value={val2} onChange={(ev) => setVal2(ev.target.value)}/>
             <div>{val2}</div>
   </>
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы