Question

我创建了一个redux-form来获取用户数据，然后推送到Firebase数据库。

在该表单中，其中一个字段（用于图像上传）引用了一个上传到Cloudinary图像管理的Dropzone组件。由于数据会传输到两个不同的数据库，因此我使用Dropzone组件将上传的文件URL保存在文件上传缩减器中。

在redux-form中我有一个动态的图像url字段输入 - 所以一旦将图像放入Dropzone组件中，这个图像url字段就会被自动填充来自上传缩减器的上传网址。

以上所有工作正常，当我将图像放入Dropzone组件时 - 操作创建者将文件推送到Cloudinary，然后创建上传URL的漂亮有效负载，然后发送到reducer使其成为状态。我在图片网址 ...

中看到了上传网址

这是问题所在：图像网址字段不会像其他字段一样被推送到Firebase数据库。当我检查Firebase数据库时，它包含所有其他填写的字段，但图像网址除外。我非常确定我没有正确地使用动态字段 onChange prop方法。

如果有人知道我在说什么，并且可以给我一些指导，我会非常感激。

谢谢Alvin

这是主要的Redux-Form组件

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import Dropzone from 'react-dropzone';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { 
    createPartners,
} from '../actions';
import ImageUpload from './image_upload';
  


class PartnersNew extends Component {
    
    renderField(field) {
        return (
            <div>
                <label>{field.label}</label>
                <input
                    className="form-control"
                    type="text"
                    {...field.input}
                />
            </div>
        )
    }

    renderImageField() {
        return (
            <div> 
                <ImageUpload />
            </div>
        )
    }


    onChangeImage(event) {
        return event.target.value 
    };

    onSubmit(values) {
        this.props.createPartners(values, () => {
            this.props.history.push("/")
        })
    }
    render() {
        const { handleSubmit } = this.props;
        return (
            <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                <div>
                    <Field
                        label="Company Name"
                        name="companyName"
                        component={this.renderField}
                    />
                    <Field
                        label="Address Line 1"
                        name="address1"
                        component={this.renderField}
                    />
                    <Field
                        label="Address Line 2"
                        name="address2"
                        component={this.renderField}
                    />
                    <Field
                        label="City"
                        name="city"
                        component={this.renderField}
                    />
                    <Field
                        label="State"
                        name="state"
                        component={this.renderField}
                    />
                    <Field
                        label="Zip Code"
                        name="zipCode"
                        component={this.renderField}
                    />
                    <Field
                        label="Company Description"
                        name="coDescription"
                        component={this.renderField}
                    />
                    <Field
                        label="Phone Number"
                        name="phNumber"
                        component={this.renderField}
                        
                    />
                    <Field
                        label="Image"
                        name="company_image"
                        component={this.renderImageField}
                    />
                    <Field
                        label="Image Ref"
                        name="image_ref"
                        component={() => {
                            return (
                                <div>
                                    <input
                                        className="form-control"
                                        type="text"
                                        hidden={false}
                                        value={this.props.upload}
                                        onChange={this.onChangeImage}
                                    />
                                </div>
                            )
                        }}
                        value={this.props.upload}
                    />
                    <div>
                        {this.props.upload === '' ? null :
                        <div>
                            <img src={this.props.upload} />
                        </div>}
                    </div>
                </div>
                <div>
                    <label>Contact Person</label>
                </div>
                <Field
                    label="First Name"
                    name="firstName"
                    component={this.renderField}
                />
                <Field
                    label="Last Name"
                    name="lastName"
                    component={this.renderField}
                />
                <Field
                    label="Company Title"
                    name="coTitle"
                    component={this.renderField}
                />
                <Field
                    label="Contact Phone"
                    name="coPhone"
                    component={this.renderField}
                />
                <Field
                    label="Username"
                    name="username"
                    component="input"
                    type="password"
                />
                <div>
                    <button className="btn btn-primary">Submit</button>
                </div>
            </form>
        )
    }
}

const mapStateToProps = state => {
    return { upload: state.upload }
    
}

export default reduxForm({
    form: 'PartnersNewForm'
})
(connect(mapStateToProps, { createPartners })(PartnersNew));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这是图片上传Dropzone组件：

import React, { Component, PropTypes } from 'react';
import Dropzone from 'react-dropzone';
import { connect } from 'react-redux';
import { dropImage } from '../actions';

class ImageUpload extends Component {
    onImageDrop(files) {
        this.props.dropImage(files);
    }
    render() {
        return (
            <div>
                <div className="FileUpload">
                    <Dropzone
                        multiple={false}
                        accept="image/*"
                        onDrop={this.onImageDrop.bind(this)}
                    >
                    <p>Drop your profile image or click to select file to upload...</p>
                    </Dropzone>
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        upload: state.upload
    }
}


export default connect(mapStateToProps, { dropImage })(ImageUpload);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这是动作创建者文件：

import Firebase from 'firebase';
import request from 'superagent';
import _ from 'lodash';
import { 
    CREATE_PARTNERS,
    FETCH_PARTNERS,
    UPLOAD_IMAGE
} from './types';

// Firebase database 
const config = {
    apiKey: "AIzaSyBhQ671Ssfp7lKOGTKRXOHY3gbnF0cQ0Zs",
    authDomain: "anoko-aafbe.firebaseapp.com",
    databaseURL: "https://anoko-aafbe.firebaseio.com",
    projectId: "anoko-aafbe",
    storageBucket: "anoko-aafbe.appspot.com",
    messagingSenderId: "492268233165"
}
Firebase.initializeApp(config);
const database = Firebase.database();
const partnersNewRef = database.ref('/partners');

// Cloudinary Image manager
const UPLOAD_PRESET = 'testPreset1';
const UPLOAD_URL = 'https://api.cloudinary.com/v1_1/duqn30c4x/image/upload';

export const createPartners = values => {
    return dispatch => partnersNewRef.push(values);
}

export const fetchPartners = () => {
    return dispatch => {
        return database.ref('/partners').once('value', snapshot => {
            const partners = snapshot.val();
            dispatch({
                type: FETCH_PARTNERS,
                payload: partners
            })
        })
    }
}

export const dropImage = file => {
    return (dispatch, getState) => {
        let uploadedFileUrl = '';
        let data;
        let fileURL;
        let upload = request.post(UPLOAD_URL)
                            .field('upload_preset', UPLOAD_PRESET)
                            .field('file', file)
        upload.end((err, response) => {
            if(err) {
                console.log('Bad Stuff - Robot Says No');
                console.log(err);
            }
            if(response.body.secure_url !== '') {
                uploadedFileUrl = response.body.secure_url;
                dispatch({
                    type: UPLOAD_IMAGE,
                    payload: uploadedFileUrl
                })
                // console.log(uploadedFileUrl.secure_url);
            }
        })
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这是上传缩减器：

import {
    UPLOAD_IMAGE
} from '../actions/types';

const INITIAL_STATE = '';

export default (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case UPLOAD_IMAGE:
            return [ ...state, action.payload ];
    }
    // console.log(action.payload);
    return state;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

预填充输入 - React - Redux-Form

0 个答案: