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

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

像您在那里那样手动更改值：

manualPayEntry.current = value;

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

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

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

Answer 2

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

react-number-format npm

onValueChange is not same as onChange. It gets called on whenever there is change in value which can be caused by any event like change or blur event or by a prop change. It no longer receives event object as second parameter.

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

react set value to another component when change value in different component

reactjs

react-native

use-ref