如何连接 React Dropzone 和 Redux 表单

Question

我正在尝试使用 redux 形式连接一个 dropzone 组件，但无济于事。当我提交表单并呈现 MyFormReview 组件时，Redux 存储中的 formValues 似乎不保存文件，因此不会呈现。我找过类似的帖子，但看不出我哪里出错了。在此先感谢您的帮助，如果您需要更多信息，请告诉我！

我没有包含父表单组件的代码，因为它只是在 MyForm 和 MyFormReview 之间呈现。

非常感谢。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { reduxForm, Field } from 'redux-form';
import Dropzone from './Dropzone';

class MyForm extends Component {

    render() {
        return (
            <form onSubmit={this.props.handleSubmit(this.props.onFormSubmit)} >
               <div className="flex flex-column">
                  <div className="flex center w-50 mb2">
                      <Field
                      name="files"
                      component={Dropzone}
                  />
               </div>
                    <div>
                        <Link to="/dashboard">
                            <Button>Cancel</Button>
                        </Link>
                        <button primary type="submit">
                            Review
                        </button>
                    </div>
                </div>
            </form>
       );
    }
};

export default reduxForm({
    validate,
    form: 'myForm',
    destroyOnUnmount: false
})(MyForm);

onFormSubmit 属性用于在表单的审阅和编辑呈现之间切换（因此用户可以确认 his/her 输入）onFormSubmit={() => this.setState({ showFormReview: true})}

这里是 Dropzone 组件：

import React, {Component} from 'react';
import {DropzoneArea} from 'material-ui-dropzone';

class Dropzone extends Component{
  constructor(props){
    super(props);
    this.state = {
      files: []
    };

  }
  handleChange(files){
    this.setState({
      files: files
    });
  }
  render(){
    return (
      <DropzoneArea 
        acceptedFiles = {['image/*']}
        filesLimit = {10}
        dropzoneText="upload your images here!"
        onChange={this.handleChange.bind(this)}
        />
    )  
  }
} 

export default Dropzone;

这是 MyFormReview 组件：

const MyFormReview = ({ onCancel, formValues, submitForm, history }) => {
    const reviewFields = () => {
            return (
            <div className="ba1 ma1" key={"files"}>
                <label>"Files"</label>
                <div>{formValues["files"]}</div>
            </div>
        )
    });

    return (
        <div>
            <h3>Please confirm your entries</h3>    
            {reviewFields}
            <button className = "yellow darken-3  white-text btn-flat" onClick={onCancel}>
                Back
            </button>
            <button
                className = "green white-text right btn-flat" 
                onClick={() => submitForm(formValues, history)}
            >
                Send Survey
            </button>
        </div>
    );
};

function mapStateToProps(state) {
    return {formValues: state.form.myForm.values};
}

export default connect(mapStateToProps, actions)(withRouter(MyFormReview));

Answer 1

对于任何偶然发现此问题的人 post，这是我的解决方案：

在Dropzone组件中，handleChange变为：

handleChange(files){
    this.setState({
      files: files
    });
    this.props.input.onChange(files)
}

在 myFormReview 中，我可以通过将以下 if 语句插入 reviewFields 函数来预览图像。

const reviewFields = _.map(formFields,  ({name, label}) => {
            if(name === "files"){
                return <div>{_.map(formValues[name], (file) => <img alt={file.name} src={URL.createObjectURL(file)} /> )}</div>
            }
            else{
                return (
                    <div className="ba1 ma1" key={name}>
                        <label>{label}</label>
                        <div>{formValues[name]}</div>
                    </div>
                )
            }
    });

如何连接 React Dropzone 和 Redux 表单

How to hook up React Dropzone & Redux form

javascript

reactjs

redux

redux-form