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

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

拆分表格

1. 创建Table.js

import React, {Component} from 'react'

class Table extends Component {
    render() {
        return (
            
                {
                    this.props.list.map(item => {
                        return (
                            
                        )
                    })
                }
                

                

                

                    
ID
                    
用户名
                    
操作
                
                
                

                                
{item.id}
                                
{item.name}
                                

                                     {
                                        this.props.edit(item);
                                    }}>修改
                                    
                                     {
                                        this.props.deleteItem(item)
                                    }}>删除
                                    
                                
                            
            
        )

    }
}
export default Table

2. 替换App.js中的表格

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 (
            

                

                    用户名
                    

                        {this.props.handleChange(e.target.value)}}/>
                    

                
                

                    

                        提交
                    
                
            
        )
    }
}

export  default From

2.App.js中修改相应的处理逻辑

• 文本框中的change事件处理

handleChange = (name) =>{
    this.setState({
        name
    });
}

源码 https://gitee.com/qinaichen/react-crud.git 中的gis分支