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

Question

[Mesuti]

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

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,

Answer 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>
   </>
}

Comments

[Mesuti]

Спасибо за ответ.
Оформил в codesandbox https://codesandbox.io/s/vigorous-leftpad-8wlsj?fi...

Проблема все та же - если указывать value={state} то выходит ошибка про контролируемый компонент

Как ее можно обойти?

[gsaw]

Mesuti, ну инициализируйте значения пустыми строками.

const [val1, setVal1] = useState("");
const [val2, setVal2] = useState("");

[Mesuti]

gsaw, Спасибо!
Да, решение в инициализации с пустыми строками.

Подскажите, есть ли этому объяснение?

[gsaw]

Mesuti,

Подскажите, есть ли этому объяснение?

По ссылке что вы превели в начале, написано про Управляемые компоненты. Они отображают значение заданное аттрибутом "value". Неуправляемые сами хранят значение свое.

Так вот в моем первом варианте useState() было без параметра, потому val1 было изначально пустым - undefined. То есть значение value в компоненте value было тоже undefined и компонента считала, что она не контролируемая. А потом внезапно методом setVal1 устанавливалось значение val1 и получалось, что компонента input становилась управляемой. Потому и выводилось предупреждение

"Компонента меняет неконтролируемый input на управляемый"