訪問表單值

Question

我有一個react + redux表單和2個組合框（一個自定義組件包裝一個redux字段）。我希望組合框2的選項將由組合框1的當前值更改。

如何訪問組合框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)