React实现多个输入框修改信息并提交的功能

在项目中，点击修改按钮，弹出修改信息框（Modal），里面有四个输入框，实现了删除、修改输入框中原有文本的功能，但是在提交的时候，我原先想到的方法，导致最后一次修改会覆盖之前的所有修改数据。
在本例中，用switch…case解决了这个问题。

修改信息组件：src/edit/index.js

在每一个OnChange事件中都绑定了一个“name”值，用于区分不同输入框。
并把“name”值回传给父组件，在switch中进行判断的依据。

import React, { Component } from 'react'

export default class Edit extends Component {

    //输入框事件
    editData (key,e){
        console.log('修改输入框',e.target.value)
        console.log('key',key)
        const editInput = {
            value : e.target.value,
            key : key
        }
        //每次只能改变一次，传入到父组件中进行重新渲染
        this.props.editDatas(editInput)
    }

    render() {
        
        return (
            <div>

                <p >
                    标题：<input type="text" style={{ border: '1px solid #D3D3D3', borderRadius: '5px', padding: '5px' }} ref='inputText' 
                        value={this.props.datas.title} 
                        onChange={this.editData.bind(this, 'title')}/>
                </p>
                <p>
                    来源：<input type="text" style={{ border: '1px solid #D3D3D3', borderRadius: '5px', padding: '5px' }} 
                        value={this.props.datas.source}
                        // readOnly={true} />
                        onChange={this.editData.bind(this, 'source')} />
                </p>
                <p>
                    主体：<input type="text" style={{ border: '1px solid #D3D3D3', borderRadius: '5px', padding: '5px' }} 
                        value={this.props.datas.subject}
                        // readOnly={true} />
                        onChange={this.editData.bind(this, 'subject')}/>
                </p>
                <p>
                    备注：<input type="text" style={{ border: '1px solid #D3D3D3', borderRadius: '5px', padding: '5px' }} 
                        value={this.props.datas.remark}
                        // readOnly={true} />
                        onChange={this.editData.bind(this, 'remark')}/>
                </p>
            </div>
        )
    }
}

内容区（edit的父组件）：src/View/content/index.js

import React, { Component } from 'react'
import './index.css'
import { Link } from "react-router-dom";
import { Modal, Button, Tooltip, message } from 'antd';
import Edit from '../../edit/index'
//导入视频相关的API
import { addFav, deleteFav, editVideo } from '../../api/video'
//导入cookie
import Cookies from 'js-cookie'



export default class Content extends Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            user_id: '1',
            data: '',
            title: '',
            source: '',
            subject: '',
            remark: '',
            video_id: ''
        }
    }


    //弹窗事件（把当前的视频信息放在data中）
    showModal = (data) => {
        console.log('弹窗事件', data)
        //保存分类对象
        // this.data = data
        this.setState({
            visible: true,
            //把弹出的视频信息放入state中共享
            data: data,
            video_id: data.id
        })

    };

    //编辑视频信息事件
    editData(e) {
        console.log('内容区key', e.key)
        console.log('内容区value', e.value)
        this.setState({
            data: e.value
        })

        switch (e.key) {
            case "title":
                this.setState({
                    title: e.value
                })
                break;
            case "source":
                this.setState({
                    source: e.value
                })
                break;
            case "subject":
                this.setState({
                    subject: e.value
                })
                break;
            case "remark":
                this.setState({
                    remark: e.value
                })
                break;
            default:
                break;
        }
    }


    handleOk = e => {

        console.log('编辑视频信息后', e)
        const para = {
            video_id: this.state.video_id,
            title: this.state.title,
            source: this.state.source,
            subject: this.state.subject,
            remark: this.state.remark
        }

        console.log('是否成功', para)

        this.setState({
            visible: false,
        });


        editVideo(para)
            .then(res => {
                console.log('更新视频信息', res)
            })
            .catch(err => {
                console.log('更新视频信息错误', err)
            })

    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    // 生命周期函数--渲染后调用
    componentDidMount() {
        this.getCookie()
    }

    getCookie = () => {
        Cookies.get();
        // console.log('获取cookie', Cookies.get().id)
        let cookie_id = Cookies.get().user_id
        this.setState({
            user_id: cookie_id
        })
    }
    }


    render() {
        return (
            <div className="admin-content">
                {
                    // 父组件传来的值
                    this.props.list.map((items, index) => {
                        return (
                            <div className="admin-item" key={index}>
                                <div className="admin-items" key={index}>
                                    
                                    <div className="item-footer">
                                         <Button type="primary" onClick={this.showModal.bind(this, items)} >
                                                修改
                                         </Button>
                                                
                                         <Modal
                                             title="修改视频信息"
                                             visible={this.state.visible}
                                             onOk={this.handleOk}
                                             onCancel={this.handleCancel}
                                             mask={false}
                                         >
                                             {/* 把弹出框的值放入编辑子组件 */}
                                             <Edit datas={this.state.data}
                                                editDatas={this.editData.bind(this)}
                                             />
                                         </Modal> 
                                             
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}

感谢：《react页面中存在多个input时巧妙设置value属性》