在不同组件中更改值时将设置值反应到另一个组件

Posted 2023-02-25

【中文标题】在不同组件中更改值时将设置值反应到另一个组件

【英文标题】：react set value to another component when change value in different component

【发布时间】：2021-01-25 06:35:24

【问题描述】：

我有两个反应输入组件，其中一个输入组件；值更改，我必须在另一个输入字段中设置相同的值。

这是我的两个输入组件。

               <div className="col-md-4">
                  <label htmlFor="saleamount">Payment </label>
                  <NumberFormat id="manualPaymentEntry" name="manualPaymentEntry" fixedDecimalScale=true decimalScale=2 value=manualPayEntry.current className="form-control" thousandSeparator=true thousandsGroupStyle="lakh" onChange=(values) => 
                    const  formattedValue, value  = values;
                    handleManualPaymentEntry(value);
                   />
                  
                </div>
                <div className="col-md-4">
                  <label htmlFor="selectedPayment">Actual Payment</label>
                  <NumberFormat readOnly=true fixedDecimalScale=true decimalScale=2 value=cumulativePay className="form-control" thousandSeparator=true thousandsGroupStyle="lakh" />
                </div>
              </div>

当manualPaymentEntry 发生变化时，我必须将相同的值设置为cumulativePay

  const [cumulativePay, setCumulativePay] = useState(0);
  const manualPayEntry = useRef(0);


  useEffect(() => 
    setCumulativePay(manualPayEntry.current);
  , [manualPayEntry]);


const handleManualPaymentEntry = (value) => 
    let val = parseFloat(value);
    manualPayEntry.current = value;
  

我使用manualPayEntry 的useRef 将当前值设置为cumulativePay，但是当manualPayEntry 发生变化时，它不会将值设置为cumulativePay，我总是只得到'0'... ，但manualPayEntry 的当前值应该反映在cumulativePay 中

【参考方案1】：

问题得到解决，将 onChange 更改为 onValueChange 后，如文档中所述 onchange 将不再获得 value ，而是我们需要使用 onValueChange

react-number-format npm

onValueChange 与 onChange 不同。每当它被调用 价值发生变化，这可能是由任何事件（如变化）引起的 或模糊事件或通过道具更改。它不再接收事件对象 作为第二个参数。

【参考方案2】：

像您在此处那样手动更改值：

manualPayEntry.current = value;

不触发 React 的重新渲染功能。为什么不直接在handleManualPaymentEntry中添加setCumulativePay呢？

const handleManualPaymentEntry = (value) => 
    let val = parseFloat(value);
    manualPayEntry.current = value;
    setCumulativePay(value);

或者您也应该将 manualPayEntry 视为一种状态，而不是 ref，尽管实际上不建议根据另一个状态更改 useEffect 中的状态。我真的认为直接在处理函数中更改所需的状态是最好的解决方案。

【讨论】：

直接更改不起作用 setCumulativePay(value);，我得到未定义的值

您能否检查一下您是否正确使用了 NumberFormat 组件的 onChange 函数，似乎 undefined 正在传递给您的处理程序。

但我的 manualPayEntry 正在使用 onChange 函数。我的意思是，该值被填充在输入框中，但是当我调试时我变得未定义，因此我开始使用 useRef for manalPayEntry 来获取当前值....

如果在处理函数中使用 console.log(value) 会得到什么？

感谢 Ivo，将 onchange 更改为 onValueChange 后问题得到解决...