如何使用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演示