外部相互作用からのRedux-form更新フィールド値

Question

私はredux形式をアプリケーション状態に接続しており、すべてがうまくいくようです。データをフェッチしてフォームにロードし、データを送信して、必要なメタデータを取得することができます。

ただし、管理対象フィールドの値を変更する必要があるカスタムの操作（カラーピッカー）があります。飛行機。私が試してみると画面は変わりますが、reduxフォームの状態は変わりません。つまり、フォームを送信すると、フォームに表示されている新しいデータではなく元のフィールドデータが取得されます。

以下のバージョンでは、フィールドpropsをコンポーネントに渡して、ColorSelectコンポーネントの状態をフィールド値として使用しようとしています。私もアクションクリエーターを作成しようとしましたが、この例と同じ結果とはるかに多くのコード...

注：react@ww15.4.2、react-redux@^5.0.2、redux-form @^6.4.3

ES6：CollectionForm.js

... 
 
import ColorSelect from './ColorSelect'; 
 

 

 
class CollectionForm extends Component { 
 

 
    /** 
 
    * On form submit accepted 
 
    * @param values 
 
    */ 
 
    onSubmit(values){ 
 

 
     //See screenshot for evidence 
 
     log('Updating collection:', 'warn', values); 
 

 
     //values.color is grey and not yellow! 
 
     this.props.dispatch(updateCollection(values)); 
 
     return; 
 
    } 
 

 
    /** 
 
    * Form render 
 
    * @return {JSX} 
 
    */ 
 
    render() 
 
    { 
 
     const { handleSubmit, submitting } = this.props; 
 

 
     return (
 
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
 
       <Field component={renderTextInput} name="name" type="text" label="Name"/> 
 
       <Field component={ColorSelect} name="color" /> 
 

 
       <div class="field-buttons right-align group"> 
 
        <Button type="submit" disabled={submitting} primary> 
 
         Save 
 
        </Button> 
 
       </div> 
 
      </form> 
 
     ); 
 
    } 
 
}; 
 

 
//Redux form decorator 
 
CollectionForm = reduxForm({ form: 'collectionForm' })(CollectionForm) 
 

 
// State connector 
 
CollectionForm = connect(
 
    state => ({ 
 
     initialValues: state.collections.activeCollection 
 

 
    }), //MapStatetoProps 
 
    { 
 
     onLoad: fetchCollection 
 
    } //mapActionToProps 
 
)(CollectionForm); 
 

 
export default CollectionForm;

ES6：CollectionForm.js

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

 
const colors = [ 
 
    'grey', 'green', 'yellow', 'orange', 'red', 'purple', 'blue' 
 
]; 
 

 
export default class ColorSelect extends Component { 
 

 
    constructor(props){ 
 
     super(props); 
 

 
     this.state = { 
 
      selectedColor : this.props.input.value //Set to current <Field> input value 
 
     }; 
 

 
     this.onSelect = this.onSelect.bind(this); 
 
     this.renderColor = this.renderColor.bind(this); 
 
    } 
 

 
    /** 
 
    * Color picker selected 
 
    * @param color 
 
    */ 
 
    onSelect(color){ 
 
     this.setState({ selectedColor: color }); //Sets correct state here 
 
    } 
 

 
    /** 
 
    * Render a color list item 
 
    * @param color 
 
    * @return {JSX} 
 
    */ 
 
    renderColor(color){ 
 

 
     const select = this.state.selectedColor === color ? "active" : ""; 
 
     const klass = color + " " + select; 
 

 
     return <li key={color}> 
 
      <a class={klass} onClick={(event) => this.onSelect(color)}></a> 
 
     </li> 
 
    } 
 

 
    /** 
 
    * Render color list action 
 
    * @return {JSX} 
 
    */ 
 
    render(){ 
 

 
     //Override field value with colorSelected state 
 
     
 
     return (
 
      <div> 
 
       <input {...this.props.input} value={this.state.selectedColor} name="color" type="text" label="Color" /> 
 

 
       <div class="color-selector"> 
 
        <ul> 
 
         {colors.map((color) => this.renderColor(color))} 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     ); 
 
    } 
 
}

Answer 1

あなたが望むものを達成するために一緒にchange action creatorと反応し、ReduxののmapDispatchToPropsを使用することができます。

import { Component } from "react"; 
import { change } from "redux-form"; 

class ColorSelect extends Component { 
    // ...other stuff in this class... 

    renderColor (color) { 
    const { selectColor } = this.props; 
    return <li key={color}><a onClick={() => selectColor(color)}></a></li>; 
    } 
} 

export default connect(null, { 
    selectColor: color => change("yourFormName", "yourFieldName", color) 
})(ColorSelect)