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

Question

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

这是我的两个输入组件。

               <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 中

Answer 1

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

react-number-format npm

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

Answer 2

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

manualPayEntry.current = value;

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

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

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