React练手小项目之简易电商管理系统

结构及组件拆分

代码

All.jsx

import React, { Component } from 'react';

import Heard from './heard'
import Table from './Table'

import './All.css'
import img1 from './images/dn1.jpg'
import img2 from './images/dn2.jpg'
import img3 from './images/dn3.jpg'
import img4 from './images/dn4.jpg'
import img5 from './images/dn5.jpg'

class All extends Component {
    state = {
        arr:[
            {url:img1,msg:'APPLEMacBookAir13.3英寸',price:6488.00,calsses:1,id:1},
            {url:img2,msg:'小米(MI)Air13.3英寸',price:4996.00,calsses:1,id:2},
            {url:img3,msg:'机械革命(MERHREVO)',price:5678.00,calsses:1,id:3},
            {url:img4,msg:'联想(Lenovo)拯救者R720',price:5999.00,calsses:1,id:5},
            {url:img5,msg:'联想(Lenovo)小新潮7000',price:6488.00,calsses:1,id:4}
        ],
        classarr:[
            "冰箱","电脑","手机"
        ],
        

    }

    // 新增与修改逻辑
    handers = (val) =>{

        console.log(val);
        if(val.addurl == '' ||val.addmsg == ''||val.addclasses == '' || val.addprice==''){
            alert('不能为空')
            return
        }
        var arr1 = this.state.arr
        // 判断id是否为空，空就新增，有就修改
        if(val.addid != null){
            for (let index = 0; index < arr1.length; index++) {
                if(arr1[index].id === val.addid){
                    var num = index
                    break
                }
            }
            arr1[num].url = val.addurl
            arr1[num].msg = val.addmsg
            arr1[num].calsses = val.addclasses
            arr1[num].price = val.addprice
        }else{
            arr1.push({
                id:new Date().getTime(),
                url:require(`./images/${val.addurl}.jpg`),
                msg:val.addmsg,
                price:val.addprice,
                calsses:val.addclasses
            })
        }

        this.setState({
            msg:'新增',
            arr:arr1
        })
    }
    // 删除逻辑
    delHander = (val) =>{

        var arr2  = this.state.arr
        arr2.splice(val,1)
        this.setState({
            arr:arr2
        })
    }
    // 
    render() {
        return (
            <div className='big'>
                <h1>商品后台管理系统</h1>
                
                <Heard handers = {this.handers} />
                
                <Table arr = {this.state.arr}  delHander = {this.delHander} />
            </div>
        );
    }
}

export default All;

heard.jsx

import React, { Component } from 'react';
import Bus from './Bus';
class Heard extends Component {
    constructor(props){
        super(props)
        this.url = React.createRef();
        this.msg = React.createRef();
        this.price = React.createRef();
        this.classes = React.createRef();
    }
    state = {

        addid:null,
        addurl:'',
        addmsg:'',
        addprice:'',
        addclasses:1,
        btnmsg:'新增',
       
    }
    valChange = (e) =>{
        this.setState({
            addurl:e.target.value
        })
    }
    msgChange = (e) =>{
        this.setState({
            addmsg:e.target.value
        })
    }
    priChange = (e) =>{
        this.setState({
            addprice:e.target.value
        })
    }
    optChange = (e) =>{
        // console.log(e.target.value);
        this.setState({
            addclasses:e.target.value
        })
    }
    hander = ()=>{
        var arr = []
        arr.url = this.state.addurl
        arr.msg = this.state.addmsg
        arr.price = this.state.addprice
        arr.classes = this.state.addclasses
        // console.log(arr);
        this.setState({
            arr1:arr
        })
    }
    componentDidMount(){
        Bus.addListener('sayhello',this.changeMsg)
    }
    componentWillUnmount(){
        Bus.removeListener('sayhello',this.changeMsg)
    }
    changeMsg = (val)=>{
        // console.log(val);
        this.setState({
            addmsg:val.msg,
            addprice:val.price,
            addurl:val.url,
            addclasses:val.calsses,
            btnmsg:'修改',
            addid:val.id
        })

    }
    handers= () =>{
        this.setState({
            addid:null,
            addurl:'',
            addmsg:'',
            addprice:'',
            addclasses:'2',
            btnmsg:'新增',
        })

        this.props.handers(this.state)
    }
    render() {
        return (
            <div className='heard'>
                图片地址：<input type="text" value={this.state.addurl} onChange={this.valChange} ref={this.url}/>
                简介：<input type="text" value={this.state.addmsg} onChange={this.msgChange} ref={this.msg}/>
                价格：<input type="text" value={this.state.addprice} onChange={this.priChange} ref={this.price}/>
                类别：
                <select ref={this.classes} onChange={this.optChange} value={this.state.addclasses}>
                    <option value="0">冰箱</option>
                    <option value="1">电脑</option>
                    <option value="2">手机</option>
                    </select>
                <button onClick={() => this.handers(this.state)}>{this.state.btnmsg}</button>

            </div>
        );
    }
}

export default Heard;

Table.jsx

import React, { Component } from 'react';

import Bus from './Bus';
class Table extends Component {
    changeHander =(val)=>{
        // console.log(val);
        Bus.emit('sayhello',val)
    }
    state ={
        classarr:[
            "冰箱","电脑","手机"
        ]
    }
    render() {
        return (
            <>
                <table>
                    <thead>
                        <tr>
                            <th>图片</th>
                            <th>简介</th>
                            <th>价格</th>
                            <th>类别</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.props.arr.map((item,index) =>{
                                return <tr key={index}>
                                    <td><img src={item.url} alt="" /></td>
                                    <td>{item.msg}</td>
                                    <td>￥{item.price}</td>
                                    <td>{this.state.classarr[item.calsses]}</td>
                                    <td><button onClick={ () => this.changeHander(item)}>修改</button><button onClick={() => this.props.delHander(index)}>删除</button></td>
                                </tr>
                            })
                        }
                    </tbody>
                </table>
            </>
        );
    }
}

export default Table;

Bus.js

import { EventEmitter } from 'events'
export default new EventEmitter()

运行结果