在项目中,点击修改按钮,弹出修改信息框(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>
)
}
}