Reactjs 使用MongoDB和React通过表单将信息传递给3个单独的组件

我正在为一家漫画店建立一个网站，我正在努力通过表单将信息传递给3个不同的组件（过期、新漫画、交易）。目前，我可以将数据发布到后刊，但我希望根据是后刊、新漫画还是交易将类似信息从表单传递到每个组件

我曾尝试为新的漫画和交易添加产品动作，但仍然不明白如何在表单中识别这些动作

我需要做什么才能让用户在表单上选择其中一个选项，然后将数据正确发布到正确的组件？

到目前为止，我的生产行动是：

到目前为止，我的生产行动是：

import React，{Component}来自'React'；
从“../../../hoc/user”导入UserLayout；
从“../../utils/Form/FormField”导入FormField；
从“../../utils/Form/formActions”导入{update，generateData，isFormValid，populateOptionFields，resetFields}；
从“../../utils/Form/FileUpload”导入文件上载；
从“react redux”导入{connect}
从“../../../actions/products\u actions”导入{getCharacters，getPublishers，addProduct，clearProduct}
类AddProduct扩展组件{
陈述={
formError:false，
成功：错，
表格数据：{
姓名：{
元素：“输入”，
值：“”，
配置：{
标签：“产品名称”，
名称：'name_input'，
键入：“文本”，
占位符：“输入标题”
},
验证：{
必填项：true
},
有效：假，
感动:错,，
验证消息：“”，
showlabel:正确
},
说明：{
元素：“textarea”，
值：“”，
配置：{
标签：“产品说明”，
名称：'description_input'，
键入：“文本”，
占位符：“输入您的描述”
},
验证：{
必填项：true
},
有效：假，
感动:错,，
验证消息：“”，
showlabel:正确
},
价格：{
元素：“输入”，
值：“”，
配置：{
标签：“产品价格”，
名称：“价格输入”，
键入：“编号”，
占位符：“输入您的价格”
},
验证：{
必填项：true
},
有效：假，
感动:错,，
验证消息：“”，
showlabel:正确
},
人物：{
元素：“选择”，
值：“”，
配置：{
标签：'产品字符'，
名称：“字符输入”，
选项：[]
},
验证：{
必填项：true
},
有效：假，
感动:错,，
验证消息：“”，
showlabel:正确
},
问题:{
元素：“输入”，
值：“”，
配置：{
标签：“发行编号”，
名称：“问题输入”，
键入：“编号”，
占位符：“输入问题编号”
},
验证：{
必填项：true
},
有效：假，
感动:错,，
验证消息：“”，
showlabel:正确
},
装运：{
元素：“选择”，
值：“”，
配置：{
标签：“装运”，
名称：'shipping_input'，
选项：[
{key:true，值：'Yes'}，
{key:false，值：'No'}，
]
},
验证：{
必填项：true
},
有效：假，
感动:错,，
验证消息：“”，
showlabel:正确
},
提供：{
元素：“选择”，
值：“”，
配置：{
标签：'可用，库存'，
名称：“可用_输入”，
选项：[
{key:true，值：'Yes'}，
{key:false，值：'No'}，
]
},
验证：{
必填项：true
},
有效：假，
感动:错,，
验证消息：“”，
showlabel:正确
},
出版商：{
元素：“选择”，
值：“”，
配置：{
标签：“出版商”，
名称：'publisher_input'，
选项：[]
},
验证：{
必填项：true
},
有效：假，
感动:错,，
验证消息：“”，
showlabel:正确
},
出版：{
元素：“选择”，
值：“”，
配置：{
标签：“发布”，
名称：“发布输入”，
选项：[
export function getProductsToShop(skip, limit, filters  = []){
    const data ={limit, skip, filters}
    const request = axios.post(`${PRODUCT_SERVER}/Shop/back_issues`, data)
        .then(response => {
                return {
                size: response.data.size,
                articles: response.data.articles
            }
        });

    return {
        type: GET_PRODUCTS_TO_SHOP,
        payload: request
    }

}

export function getProductsToShop(skip, limit, filters  = []){
    const data ={limit, skip, filters}
    const request = axios.post(`${PRODUCT_SERVER}/Shop/new_comics`, data)
        .then(response => {
                return {
                size: response.data.size,
                articles: response.data.articles
            }
        });

    return {
        type: GET_PRODUCTS_TO_SHOP,
        payload: request
    }

}


export function getProductsToShop(skip, limit, filters  = []){
    const data ={limit, skip, filters}
    const request = axios.post(`${PRODUCT_SERVER}/Shop/trades`, data)
        .then(response => {
                return {
                size: response.data.size,
                articles: response.data.articles
            }
        });

    return {
        type: GET_PRODUCTS_TO_SHOP,
        payload: request
    }

}

import React, { Component } from 'react';
import UserLayout from '../../../hoc/user';
import FormField from '../../utils/Form/formfield';
import { update, generateData, isFormValid, populateOptionFields, resetFields } from '../../utils/Form/formActions';
import FileUpload from '../../utils/Form/fileupload';

import {connect} from 'react-redux'
import {getCharacters, getPublishers, addProduct, clearProduct } from '../../../actions/products_actions'

class AddProduct extends Component {

    state={
        formError:false,
        formSuccess:false,
        formdata:{
            name: {
                element: 'input',
                value: '',
                config:{
                    label: 'Product title',
                    name: 'name_input',
                    type: 'text',
                    placeholder: 'Enter title'
                },
                validation:{
                    required: true
                },
                valid: false,
                touched: false,
                validationMessage:'',
                showlabel: true
            },
            description: {
                element: 'textarea',
                value: '',
                config:{
                    label: 'Product description',
                    name: 'description_input',
                    type: 'text',
                    placeholder: 'Enter your description'
                },
                validation:{
                    required: true
                },
                valid: false,
                touched: false,
                validationMessage:'',
                showlabel: true
            },
            price: {
                element: 'input',
                value: '',
                config:{
                    label: 'Product price',
                    name: 'price_input',
                    type: 'number',
                    placeholder: 'Enter your price'
                },
                validation:{
                    required: true
                },
                valid: false,
                touched: false,
                validationMessage:'',
                showlabel: true
            },
            character: {
                element: 'select',
                value: '',
                config:{
                    label: 'Product Character',
                    name: 'character_input',
                    options:[]
                },
                validation:{
                    required: true
                },
                valid: false,
                touched: false,
                validationMessage:'',
                showlabel: true
            },
            issue: {
                element: 'input',
                value: '',
                config:{
                    label: 'Issue number',
                    name: 'issue_input',
                    type: 'number',
                    placeholder: 'Enter issue number'
                },
                validation:{
                    required: true
                },
                valid: false,
                touched: false,
                validationMessage:'',
                showlabel: true

            },
            shipping: {
                element: 'select',
                value: '',
                config:{
                    label: 'Shipping',
                    name: 'shipping_input',
                    options:[
                        {key:true,value:'Yes'},
                        {key:false,value:'No'},
                    ]
                },
                validation:{
                    required: true
                },
                valid: false,
                touched: false,
                validationMessage:'',
                showlabel: true
            },
            available: {
                element: 'select',
                value: '',
                config:{
                    label: 'Available, in stock',
                    name: 'available_input',
                    options:[
                        {key:true,value:'Yes'},
                        {key:false,value:'No'},
                    ]
                },
                validation:{
                    required: true
                },
                valid: false,
                touched: false,
                validationMessage:'',
                showlabel: true
            },
            publisher: {
                element: 'select',
                value: '',
                config:{
                    label: 'Publisher',
                    name: 'publisher_input',
                    options:[]

                },
                validation:{
                    required: true
                },
                valid: false,
                touched: false,
                validationMessage:'',
                showlabel: true
            },
            publish: {
                element: 'select',
                value: '',
                config:{
                    label: 'Publish',
                    name: 'publish_input',
                    options:[
                        {key:true,value:'Public'},
                        {key:false,value:'Hidden'},
                    ]
                },
                validation:{
                    required: true
                },
                valid: false,
                touched: false,
                validationMessage:'',
                showlabel: true
            },

            images:{
                value:[],
                validation:{
                    required: false
                },
                valid: true,
                touched: false,
                validationMessage:'',
                showlabel: false
            }
        }
    }

    updateFields = (newFormData) => {
        this.setState({
            formdata: newFormData
        })
    }



    updateForm = (element) => {
        const newFormdata = update(element,this.state.formdata,'products');
        this.setState({
            formError: false,
            formdata: newFormdata
        })
    }

    resetFieldHandler = () => {
        const newFormData = resetFields(this.state.formdata,'products');

        this.setState({
            formdata: newFormData,
            formSuccess:true
        });
        setTimeout(()=>{
            this.setState({
                formSuccess: false
            },()=>{
                this.props.dispatch(clearProduct())
            })
        },3000)
    }


    submitForm= (event) =>{
        event.preventDefault();

        var dataToSubmit = generateData(this.state.formdata,'products');
        var formIsValid = isFormValid(this.state.formdata,'products')

        if(formIsValid){
            this.props.dispatch(addProduct(dataToSubmit)).then(()=>{
                if( this.props.products.addProduct.success){
                    this.resetFieldHandler();
                }else{
                    this.setState({formError: true})
                }
            })
        } else {
            this.setState({
                formError: true
            })
        }
    }


    componentDidMount(){
        const formdata =  this.state.formdata;

        this.props.dispatch(getCharacters()).then( response => {
            const newFormData = populateOptionFields(formdata,this.props.products.characters, 'character');            
            this.updateFields(newFormData)


        })

        this.props.dispatch(getPublishers()).then( response => {
            const newFormData = populateOptionFields(formdata,this.props.products.publishers, 'publisher');            
            this.updateFields(newFormData)


        })
    }

    imagesHandler = (images) => {
        const newFormData = {
            ...this.state.formdata
        }
        newFormData['images'].value = images;
        newFormData['images'].valid = true;

        this.setState({
            formdata:  newFormData
        })
    }




    render() {
        return (
            <UserLayout>
               <div>
                   <h1>Add product</h1>

                   <form onSubmit={(event)=> this.submitForm(event)}>

                   <FileUpload
                            imagesHandler={(images)=> this.imagesHandler(images)}
                            reset={this.state.formSuccess}
                        />

                   <FormField
                       id={'name'}
                       formdata={this.state.formdata.name}
                       change={(element)=> this.updateForm(element)}
                     />


                    <FormField
                       id={'description'}
                       formdata={this.state.formdata.description}
                       change={(element)=> this.updateForm(element)}
                     />

                     <FormField
                       id={'price'}
                       formdata={this.state.formdata.price}
                       change={(element)=> this.updateForm(element)}
                     />

                     <div className="form_devider"></div>

                     <FormField
                       id={'character'}
                       formdata={this.state.formdata.character}
                       change={(element)=> this.updateForm(element)}
                     />

                    <FormField
                       id={'issue'}
                       formdata={this.state.formdata.issue}
                       change={(element)=> this.updateForm(element)}
                     />

                    <FormField
                       id={'shipping'}
                       formdata={this.state.formdata.shipping}
                       change={(element)=> this.updateForm(element)}
                     />


                    <FormField
                       id={'available'}
                       formdata={this.state.formdata.available}
                       change={(element)=> this.updateForm(element)}
                     />



                    <div className="form_devider"></div>

                    <FormField
                       id={'publisher'}
                       formdata={this.state.formdata.publisher}
                       change={(element)=> this.updateForm(element)}
                     />



                    <FormField
                       id={'publish'}
                       formdata={this.state.formdata.publish}
                       change={(element)=> this.updateForm(element)}
                     /> 

                    {this.state.formSuccess ?
                        <div className="form_success">
                                Success
                            </div>
                        :null}

                        {this.state.formError ?
                            <div className="error_label">
                                Nope
                            </div>
                            : null}
                        <button onClick={(event) => this.submitForm(event)}>
                            Add product
                        </button>

                   </form>
               </div>


            </UserLayout>

        );
    }
}

const mapStateToProps = (state) => {
    return {
        products: state.products
    }
}

export default connect(mapStateToProps)(AddProduct);