react待办事项组件--新增与删除

import React,{Component,Fragment} from 'react';

class TodoList extends Component{

    // state状态管理

    constructor(props){

        super(props);

        this.state={

            inputValue:'hello',

            list:['111','222','333']

        }

    }

    // 页面渲染

    render(){

        return (

            <Fragment>

                <input

                    value={this.state.inputValue}

                    onChange={this.handleChange.bind(this)}

                />

                <button onClick={this.handleBtnClick.bind(this)}>提交</button>

                <ul>

                   {

                       this.state.list.map((item,index)=>{

                           return <li

                           key={index}

                           onClick={this.handleBtnDelete.bind(this,index)}

                           >{item}</li>

                       })

                   }

                </ul>

            </Fragment>

        )

    }

    // 其他方法定义

    // 输入框OnChange事件

    handleChange(e){

        this.setState({

            inputValue:e.target.value

        })

    }

    // 点击提交 输入框的内容加入列表项

    handleBtnClick(){

        console.log(this)

        this.setState({

            list:[...this.state.list,this.state.inputValue],

            inputValue:''

        })

    }

    // 点击每个列表项，删除对应列表项

    handleBtnDelete(index){

        const list=[...this.state.list];//展开运算符 拷贝一份数据给list;  list!==this.state.list

        list.splice(index,1);

        this.setState({

            list:list

        })

    }

}

export default TodoList;

转载于:https://www.cnblogs.com/laidans/p/11144634.html