Redux-form:来自州的字段值未提交

时间:2017-05-15 14:10:31

标签: reactjs redux-form

我有一个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));

1 个答案:

答案 0 :(得分:0)

如果您希望redux-form包含您的字段,那么您需要将其渲染为实际字段(就像使用renderField一样)。

如果您不想将其视为实际字段,则redux-form作者建议使用injecting the values from state within your submit handler。也许是这样的:

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