Redux-form：來自狀態的字段值未提交

Question

我有一個正在由應用程序狀態更改更新的redux-form字段（源文件）。狀態值正在正確傳遞到該字段，但點擊提交時，只提交第一個字段（名稱）（我填寫交互）。

我在這裏做錯了什麼？

import React, { Component, PropTypes } from 'react'; 
import { reduxForm, Field } from 'redux-form'; 
import { connect } from 'react-redux'; 
import { Link } from 'react-router'; 
import * as actions from '../../actions/job_actions'; 
import UploadPage from './upload_page'; 

const renderField = field => (
    <div> 
     <label>{field.input.label}</label> 
     <input {...field.input}/> 
     {field.touched && field.error && <div className="error">{field.error}</div>} 
    </div>); 

class JobForm extends Component { 

    handleFormSubmit(formProps) { 
    this.props.createJob(formProps); } 

    render() { 
    const { handleSubmit } = this.props; 
     return (
     <div> 
      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
       <label>Title</label> 
       <Field name="name" component={renderField} type="text" /> 
       <label>Input File</label> 
       <Field name="source_file" component={() => { 
        return (
        <div class="input-row"> 
         <input type="text" value={this.props.uploadedFile} /> 
        </div> 
       ) 
       }} /> 
       <button type="submit" className="btn btn- 
       primary">Submit</button> 
      </form> 
     </div> 
    ); 
    }; 
} 

const form = reduxForm({ form: 'JobForm' }); 

function mapStateToProps({uploadedFile}) { return { uploadedFile }; } 

export default connect(mapStateToProps, actions)(form(JobForm)); 

Answer 1

如果你想Redux的形式，包括你的領域，那麼你就需要渲染它作爲一個實際領域（如你與你的renderField做）。

如果您不想將其視爲實際字段，則redux-form作者建議injecting the values from state within your submit handler。也許這樣的事情：

handleFormSubmit(formProps) { 
    this.props.createJob({ ...formProps, source_file: this.props.uploadedFile}); 
}