React经典增删改查(class组件版)

// import { remove } from 'lodash';
import React, { Component } from 'react';

class App extends Component {
    constructor() {
        super()
        this.state = {
            arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            value:''
        }
    }
    inputValue = (event) => {
        //value等于event.target.value
        this.setState({
            value:event.target.value
        })
        console.log(this.state.value)
    }
    //添加指定元素
    add = () => {
        //添加谁 input的value(inputValue函数里已经获取了当前input的值,并付给state的value里)
        const arr = this.state.arr
        //扩展运算符
        this.setState({
            arr:[...arr,this.state.value],
            value:''
        })
    }

    // 删除指定元素
    remove = (index) => {
        //要删除谁?要删除:this.state.arr[index]
        let arr = this.state.arr;
        arr.splice(index, 1)
        console.log(arr)
        this.setState({
            arr: arr
        })
    }
    render() {
        const { arr,value } = this.state
        return (
            <div>
                {/* 添加 */}

                <input type="text" placeholder='添加内容' onChange={this.inputValue} value={value}/>
                <button onClick={this.add}>添加</button>
                {/* 删除 */}
                <ul>
                    {
                        arr.map((item, index) => {
                            return <li key={index}>
                                {item}
                                <button onClick={() => this.remove(index)}>删除</button>
                            </li>
                        })
                    }
                </ul>
                {/* <button onClick={click}>点击</button> */}
            </div>
        );
    }
}

export default App;