Question

我有一个带有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 );

Answer 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)

访问redux表单值

1 个答案: