Giá trị trường cập nhật của biểu mẫu Redux từ tương tác bên ngoài

Question

Tôi có một biểu mẫu dạng redux được kết nối với trạng thái ứng dụng của tôi và mọi thứ dường như hoạt động tốt. Tôi có thể tìm nạp dữ liệu và tải dữ liệu đó vào biểu mẫu của tôi, sau đó gửi dữ liệu và nhận siêu dữ liệu mà tôi muốn ...

Tuy nhiên, tôi có một tương tác tùy chỉnh (bộ chọn màu) cần thay đổi giá trị của Trường được quản lý con ruồi. Mọi thứ tôi thử sẽ thay đổi màn hình, nhưng không phải là trạng thái biểu mẫu redux tức là khi tôi gửi biểu mẫu tôi chỉ nhận được dữ liệu trường ban đầu chứ không phải dữ liệu mới được hiển thị trong biểu mẫu.

Phiên bản bên dưới đang chuyển đạo cụ trường tới thành phần và cố gắng sử dụng trạng thái thành phần ColorSelect làm giá trị trường. Tôi cũng đã thử tạo người tạo hành động, nhưng cùng một kết quả và nhiều mã hơn nữa mà ví dụ này ...

Lưu ý: 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

Bạn có thể sử dụng phản ứng-Redux của mapDispatchToProps cùng với change action creator để đạt được những gì bạn muốn:

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)