在 spring-boot react一步一步实现增删改查 中，用一个组件实现了表格和表单功能，所以现在需要将其拆分成组件独立出来
拆分表格
- 创建
Table.js
import React, {Component} from 'react'
class Table extends Component {
render() {
return (
<table className="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{
this.props.list.map(item => {
return (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>
<button className="btn btn-primary" onClick={() => {
this.props.edit(item);
}}>修改
</button>
<button className="btn btn-danger" style={{marginLeft: '5px'}} onClick={() => {
this.props.deleteItem(item)
}}>删除
</button>
</td>
</tr>
)
})
}
</tbody>
</table>
)
}
}
export default Table
- 替换
App.js中的表格
<div className="col-xs-4 col-xs-offset-1">
<Table list={this.state.list} edit={this.edit} deleteItem={this.deleteItem}></Table>
</div>
-
App.js中处理表格中的修改按钮点击事件
edit = (item) => {
this.setState({
id:item.id,
name:item.name
})
}
拆分表单组件
- 添加
Form.js
import React,{ Component } from 'react'
class From extends Component{
render(){
return (
<form className="form-horizontal">
<div className="form-group">
<label htmlFor="name" className="col-xs-3">用户名</label>
<div className="col-xs-8">
<input type="text" id="name" className="form-control" value={this.props.name} onChange={(e)=>{this.props.handleChange(e.target.value)}}/>
</div>
</div>
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<button className="btn btn-default" onClick={this.props.submit}>提交</button>
</div>
</div>
</form>
)
}
}
export default From
2.App.js中修改相应的处理逻辑
- 文本框中的
change事件处理
handleChange = (name) =>{
this.setState({
name
});
}
源码 https://gitee.com/qinaichen/react-crud.git 中的gis分支
