React实现列表的动态增加与删除

React实现列表的动态增加与删除

增加数据需求描述：点击增加按钮给下方列表增加一条数据

代码实现：

import React, { Component } from 'react';

class Jiejie extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '', // input中的值
            list: ['lisi', 'xiaohong'] // 初始列表
        }
    }

    inputChange(e) {
        this.setState({
            inputValue: e.target.value
        })
    }

    //增加姓名的按钮响应方法
    addList = () => {
        // es6扩展运算符
        // console.log(...[1, 2, 3]);  //123
        // console.log(...[1, 2, 3],4);  //1234
        // console.log([...[1, 2, 3],4]);  //[1,2,3,4]
        this.setState({
            inputValue: '',
            list: [...this.state.list, this.state.inputValue] //把list数组进行了分解，形成了新的数组，然后再进行组合
        })
    }
    render() {
        return (
            <div>
                <div>
                    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                    <button onClick={this.addList.bind(this)}> 增加姓名 </button>
                </div>
                <ul>
                    {
                        this.state.list.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default Jiejie;

删除数据需求描述：点击列表删除当前一条数据

代码实现：

import React, { Component } from 'react';

class Jiejie extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '', // input中的值
            list: ['lisi', 'xiaohong']
        }
    }

    inputChange(e) {
        this.setState({
            inputValue: e.target.value
        })
    }

    //增加姓名的按钮响应方法
    addList = () => {
        // es6扩展运算符
        // console.log(...[1, 2, 3]);  //123
        // console.log(...[1, 2, 3],4);  //1234
        // console.log([...[1, 2, 3],4]);  //[1,2,3,4]
        this.setState({
            inputValue: '',
            list: [...this.state.list, this.state.inputValue] //把list数组进行了分解，形成了新的数组，然后再进行组合
        })
    }

    // 删除姓名，使用下标的方法
    deleteItem = (index) => {
        let list = this.state.list;
        list.splice(index, 1);
        this.setState({
            list: list
        })
    }

    render() {
        return (
            <div>
                <div>
                    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                    <button onClick={this.addList.bind(this)}> 增加姓名 </button>
                </div>
                <ul>
                    {
                        this.state.list.map((item, index) => {
                            return <li key={index} onClick={this.deleteItem.bind(this, index)}>{item}</li>
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default Jiejie;