2017-08-07 22 views
0

は、私は次のようしている:Reduxフォーム、コンポーネント状態からInitialValueを設定する方法は?私のコンポーネントで

componentWillReceiveProps(nextProps) { 
    if (nextProps.industries.items.length > 0) { 
    this.setState({ 
     industry_item_id : nextProps.industries.items.find(el => el.title === "XXXX").id 
    }); 
    } 

私はそのようにように私のReduxのフォームのはinitialValueにこの値を使用したい:

myForm = reduxForm({ 
    form: 'myForm', 
    initialValues: { 
    industry_id: this.state.industry_item_id 
    }, 
})(myForm); 

... 
export default connect(mapStateToProps, mapDispatchToProps)(myForm); 

がどのように私はinitialValues内this.state使用することができます?また、this.state.industry_item_idはComponentMountに定義されていません。this.state.industry_item_idの値がcomponentWillReceiveProps(nextProps)に設定されている場合、これは機能しますか?すべての値は、あなたがしたいときは、フォームのいつでも(すなわちの初期値を設定するアクションを初期化し使用することができ、

答えて

1

を「^ 6.6.3」:ありがとう

はFYI、私は「Reduxの形式」を使用していますセットが定義されている)。

this.props.dispatch(initialize(<name of your form>, <values you want to set>)); 
+0

これは美しく機能しました。ありがとうございました – AnApprentice

0

これは、上記の問題に良い参考です:その後、どこかのコンポーネントの使用で

import { initialize } from 'redux-form'; 

http://redux-form.com/6.0.0-alpha.4/examples/initializeFromState/

componentWillReceiveProps(nextProps) { 
    if (nextProps.industries.items.length > 0) { 
     this.setState({ 
     industry_item_id : nextProps.industries.items.find(el => el.title === "XXXX").id 
     },() => { 
     // callback of setState, because setState is async. 
     // dispatch the action via this function. 
     this.props.load(this.state.industry_item_id); 
     }); 
    } 
} 


myForm = reduxForm({ 
    form: 'myForm', 
    initialValues: { 
     // Connect the value through industry reducer. 
     industry_id: state.industryReducer.id 
    }, 
})(myForm); 

... 
export default connect(mapStateToProps, mapDispatchToProps)(myForm); 

アクションとレデューサー:

const LOAD = 'redux-form-examples/account/LOAD' 

const reducer = (state = {}, action) => { 
    switch (action.type) { 
    case LOAD: 
     return { 
     data: action.data 
     } 
    default: 
     return state 
    } 
} 

/** 
* Simulates data loaded into this reducer from somewhere 
*/ 
export const load = data => ({ type: LOAD, data }) 

export default reducer 
1

あなたのコンテナのmapStateToProps関数で、これを追加します:

const mapStateToProps = (state, ownProps) => (
    initialValues: fromJS({ 
      industry_id: ownProps.industry_item_id 
     }) 
) 
関連する問題