來自外部交互的 Redux-Form 更新字段值

Question

我有一個連接到我的應用程序狀態的 redux-form，一切似乎都很好。 我可以獲取數據並將其加載到我的表單中，然后提交數據並獲取我想要的元數據...

但是，我有一個自定義交互（顏色選擇器），需要動態更改托管字段的值。 我嘗試的一切都會改變屏幕，但不會改變 redux 表單狀態，即當我提交表單時，我只獲取原始字段數據，而不是表單中顯示的新數據。

下面的版本將字段道具傳遞給組件並嘗試使用 ColorSelect 組件狀態作為字段值。 我也嘗試過創建一個動作創建器，但是這個例子的結果和代碼要多得多……

注：react@^15.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

您可以將 react-redux 的mapDispatchToProps與change操作創建者一起使用，以實現您想要的：

import { Component } from "react";
import { connect } from "react-redux";
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)