Как подключить форму React Dropzone & Redux - PullRequest
Новая
       64

Как подключить форму React Dropzone & Redux

0 голосов
/ 13 апреля 2020

Я пытаюсь подключить компонент dropzone с избыточной формой, но безрезультатно. Когда моя форма отправляется, и компонент MyFormReview отображается, formValues ​​в хранилище Redux, кажется, не содержит файлы и поэтому не отображается. Я искал похожие посты, но не вижу, где я иду не так. Заранее благодарю за любую помощь, и если вам нужна дополнительная информация, пожалуйста, дайте мне знать!

Я не включил код для родительского компонента формы, поскольку он просто отображается между 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 используется для переключения между просмотром и редактированием рендера формы (чтобы пользователь мог подтвердить свои входные данные) 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));

1 Ответ

0 голосов
/ 15 апреля 2020

Для тех, кто наткнулся на этот пост, вот мое решение:

В компоненте 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>
                )
            }
    });
...