在onChange事件中获取redux-form的值

Question

在每次表单更新后，从由redux-form管理的表单中获取值的正确方法是什么？我需要在每次表单更改时分派一个操作，使用输入到表单中的值。

我的当前解决方案获取旧值，而不是刚刚更新的值。

  onFormChange(e) {
    const { fieldValue1, fieldValue2, fieldValue3 } = this.props.fields;
    console.log(fieldValue1.value, fieldValue2.value, fieldValue3.value);
  }
  render() {
    return (
      <form onChange={this.onFormChange}>
        // inputs here
      </form>
    );
  }

我的另一个解决方案是这样的，但我不知道它有多可靠:

  onFormChange(e) {
    console.log(e);
    setTimeout(() => {
      const { fieldValue1, fieldValue2, fieldValue3 } = this.props.fields;
      console.log(fieldValue1.value, fieldValue2.value, fieldValue3.value);
    }, 0);
  }

- Gregor Menih

Answer 1

使用redux-form 6，您可以使用formValueSelector获取值：

import { formValueSelector } from 'redux-form';

const selector = formValueSelector('myFormName');

connect(
  state => ({
      values: selector(state, 'fieldValue1', 'fieldValue2', 'fieldValue3');
  })
)(MyFormComponent);

现在你可以在componentWillReceiveProps中比较当前值和之前的值：

componentWillReceiveProps(nextProps) {
    const nextValues = nextProps.values; 
    const values = this.props.values;
    // if at least one of the form values changed
    if(Object.keys(nextValues).some((key) => nextValues[key] !== values[key])) {
        console.log(nextProps.values); // do something with values
    }
}

在redux-form 6版本之前，您不必使用formValueSelector，因为redux-form会自动将values prop添加到您的修饰表单中。

- Ori Drori

---

这将导致无限循环，因为我正在调度另一个操作。 - Gregor Menih

这就是为什么你应该检查值是否实际改变，只有在它们改变时才触发一个动作。除非你在分派的动作中更改了这些值，否则你将会进入一个无限循环。 - Ori Drori

values 属性已经不存在。 - Dragos Rizescu

@OriDrori 我给你点赞，做得好。不过有一件事，你忘了添加select函数，需要你定义它。它应该类似于这样：const selector = formValueSelector('myFormName') - Dragos Rizescu

敬启者，我想指出在6+版本中有一个名为getFormValues的选择器，它基本上可以将表单中所有字段的值作为this.props.values属性放置，而以前的版本则是将它们提供给您。 - Dragos Rizescu

还有一个小错误。请将 if(Object.keys(nextValue) 改为 if(Object.keys(nextValues)。 - vladimir khozeyev