Блог

Я хочу передать входное (первое входное) значение другому (второму входному) событию ввода onBlur (первого входного), но мы должны иметь возможность изменить это второе значение события onChange, если захотим, но в настоящее время я не могу изменить второе входное значение, поскольку мы уже передали ему значение input1.

 <input type="text" value={val1} onChange={(e) => setVal1(e.target.value)} onBlur={() => setVal2(val1)}/>
<input type="text" onChange={() =>} value={val2}/>
 

это контролируемый компонент, вы не можете изменить его значение вне области действия элемента, поэтому вам нужно преобразовать входной элемент в неконтролируемый компонент. замените value свойство на defaultValue .

 <input
   type="text"
   value={val1}
   onChange={(e) => setVal1(e.target.value)}
   onBlur={() => setVal2(val1)}
  />

 <input
   type="text"
   onChange={(e) => setVal2(e.target.value)}
   defaultValue={val2}
  /> 
 

рабочая демонстрация

Даже если вы передадите значение val1 на второй ввод, в событии onChange вы все равно можете отредактировать входное значение. Пожалуйста, продолжайте с событием onchange во втором вводе