组件通信之TodoList案例。

项目结构图如下：

package.json

"devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/plugin-transform-runtime": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.1",
    "sass": "^1.52.3",
    "sass-loader": "^13.0.0",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.3",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.18.3",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-router-dom": "^5.2.1",
    "redux": "^4.2.0"
  }

Input.js

import React, { Component } from 'react'

export default class Input extends Component {
    render() {

        let {width,height,size,defaultValue} = this.props

        return (
            <input style={{
                        width: width,
                        height: height,
                        fontSize: size
                    }} 
                    value={defaultValue}
                    onInput={this.handleInput.bind(this)}
                    onKeyPress={this.handleEnter.bind(this)}
                    onChange={(event)=>{defaultValue= event.target.value;}}
            />
        )
    }

    //输入事件
    handleInput(e){
        this.props.onInput(e.target.value)
    }

    //回车事件
    handleEnter(e){
        if(e.key === 'Enter'){
            this.props.onEnter(e.target.value)
        }
    }
}

List.js

import React, { Component } from 'react'

export default class List extends Component {
    render() {
        return (
            <ul>
                { this.showList() }
            </ul>
        )
    }
    //用于渲染li
    showList(){
        if(!this.props.data || this.props.data.length === 0) return <li>暂无数据</li>

        return this.props.data.map((item,index)=>{
            return (
                <li key={index}>
                    {item}
                    <button onClick={this.handleUpdateClick.bind(this,index,item)}>修改</button>
                    <button onClick={this.handleDelClick.bind(this,index,item)}>删除</button>
                </li>
            )
        })
    }

    //删除按钮点击事件
    handleDelClick(index,item){
        this.props.onDelete(index,item)
    }
    //修改按钮点击事件
    handleUpdateClick(index,item){
        this.props.onUpdate(index,item)
    }
}

App.js

import React, { Component } from 'react'
import Input from './Input'
import List from './List'

export default class App extends Component {

    state = {
        inputValue: '',
        list: []
    }

    render() {
        return (
            <div>
                <Input defaultValue={this.state.inputValue} 
                       width="500px" 
                       height="30px"
                       size="18px" 
                       onInput={this.changeValue.bind(this)}
                       onEnter={this.submit.bind(this)}
                       />
                <List data={this.state.list} onDelete={this.del.bind(this)} onUpdate={this.update.bind(this)}/>
            </div>
        )
    }


    //输入事件函数
    changeValue(value){
        this.setState({
            inputValue: value,
        })
    }

    //提交事件
    submit(val){
        let list = this.state.list
        list.push(val)

        this.setState({
            list,
            inputValue: ''
        })
    }

    //删除方法
    del(index){
        let list = this.state.list
        list.splice(index,1)

        this.setState({list})
    }

    //修改方法
    update(index){
        let val = prompt()
        let list = this.state.list
        list.splice(index,1,val)

        this.setState({list})
    }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<App />,document.getElementById('root'));

运行效果：