正在onChange事件中获取redux表单值

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);
  }

Answer 1

使用redux表单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
    }
}

使用版本6之前的redux表单，您不必使用formValueSelector作为redux表单。将values道具自动添加到您的装饰表单中。