React经典增删改查(class组件版)_react 删除class-CSDN博客

本文链接：https://blog.csdn.net/lxn_zyl/article/details/117411942

这是一个关于React组件的示例，展示了如何创建一个应用，允许用户输入文本并将其添加到列表中，同时提供删除特定列表项的功能。输入框用于输入要添加的内容，点击添加按钮将内容添加到状态数组中，然后在页面上渲染。每个列表项都有一个删除按钮，点击后通过splice方法从数组中移除对应项，并更新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 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;