如何使用Redux Form在表單中添加兩個字段並在第3個字段中顯示

Question

我正在使用Redux-Form，其中有2個字段“客戶收入”和“合作伙伴收入”，我需要在另一個字段onChange上面的2個字段中顯示值的總和。

我嘗試將總和存儲在全局變量中，但無法正常工作。

行為如下所示，如果我嘗試添加12+ 13而不是25，則結果為27。我確定了原因，它的發生是因為將其視為1 + 12 + 1 + 13。 我不確定如何緩解此問題。

我本可以使用onBlur ，但必須使用onChange 。

任何幫助，將不勝感激。

Answer 1

可以使用防抖功能嗎？ 有一個NPM模塊react-debounce-input可以為您提供一般的實現思路。

Answer 2

使用formValueSelector來connect（）來形成表單值，這些值將在表單的props中可用。

const selector = formValueSelector('simple');

SimpleForm = connect(
  state => {
    return {
      number1: selector(state, 'number1'),
      number2: selector(state, 'number2'),
    }
  }
)(SimpleForm);

Codesandbox演示