spring-boot react一步一步实现增删改查 组件化

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/oXinYangonly/article/details/83576506

在 spring-boot react一步一步实现增删改查 中，用一个组件实现了表格和表单功能，所以现在需要将其拆分成组件独立出来

拆分表格

1. 创建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

2. 替换App.js中的表格

 <div className="col-xs-4 col-xs-offset-1">
    <Table list={this.state.list} edit={this.edit} deleteItem={this.deleteItem}></Table>
 </div>

3. App.js中处理表格中的修改按钮点击事件

edit = (item) => {
    this.setState({
        id:item.id,
        name:item.name
    })
}

拆分表单组件

1. 添加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分支