访问 redux 表单值答案

【问题标题】：access to redux form values访问 redux 表单值
【发布时间】：2017-03-27 04:33:41
【问题描述】：

我有一个带有 2 个组合框的 react + redux 表单（一个包含 redux 字段的自定义组件）。我希望组合框 2 的选项将被组合框 1 的当前值更改。

如何获取 combobox-1 的当前值？

当然，我可以通过使用“onChange”方法将值保存在内部状态或变量中，但是有没有直接访问表单值的方法？

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';


class MyComponent extends Component {

 getOptionsCombobox1 =()=> {
    return [1,2,3,4];
  }
  getOptionsCombobox2 =()=> {
    // if current value of combobox 1 is X, return [ZZZ], else, return [YYY]
  }

  render() {

    return (
      <div>
          <MyComboboxComponent
              name="combobox1"
              options={this.getOptionsCombobox1()}
            />

          <MyComboboxComponent
              name="combobox2"
              options={this.getOptionsCombobox2()}
          />

      <div>
    );
  }
}

export default reduxForm({
    form: 'myComponent ',
  }
)(MyComponent );

【问题讨论】：

标签： reactjs react-redux redux-form

【解决方案1】：

您必须使用formValueSelector 才能实现这一目标。

您的代码应如下所示

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
import {connect} from 'react-redux';


class MyComponent extends Component {

 getOptionsCombobox1 =()=> {
    return [1,2,3,4];
  }
  getOptionsCombobox2 =()=> {
    const {combobox1} = this.props;
    // if current value of combobox 1 is X, return [ZZZ], else, return [YYY]
  }

  render() {

    return (
      <div>
          <MyComboboxComponent
              name="combobox1"
              options={this.getOptionsCombobox1()}
            />

          <MyComboboxComponent
              name="combobox2"
              options={this.getOptionsCombobox2()}
          />

      <div>
    );
  }
}

MyComponent = reduxForm({
    form: 'myComponent ',
  }
)(MyComponent );

const selector = formValueSelector('myComponent'); // Create the selector


const mapStateToProps = state => {
   return {
      combobox1: selector(state, 'combobox1') 
   }

}

export default connect(mapStateToProps)(MyComponent)

【讨论】：