react-未封装留言板

//定义react组件
import React from 'react';
import ReactDom from 'react-dom'

//定义
class ToDoList extends React.Component{
    state={
        name:'',
        content:'',
        list:[]
    }

    send=()=>{
        let arr=[...this.state.list]
        arr.push({id:arr.length+1,name:this.state.name,content:this.state.content})
        this.setState({
            list:arr,
            name:'',
            content:''
        })
    };
    del=(index,id)=>{
        this.state.list.splice(index,1)
        this.setState({list:this.state.list})
    }
    check=(index,id)=>{
        this.state.list[index].content='bmw';
        this.setState({list:this.state.list})
    }
    clear=()=>{
        this.setState({list:[]})
    }

    render(){
        return (
        <div>
            <h3>ToDoList</h3>
            <input type="text" value={this.state.content}
            onChange={(ev)=>{console.log(ev.target.value)
                this.setState({content:ev.target.value})}}></input>
            <input type="button" value="提交" onClick={this.send}></input>
            <ul>
                    {/* <span>留言信息</span>
                    <em>用户名</em> */}
                    {
                        this.state.list.map((item,index)=>(
                            <li key={item.id}>
                                <span>{item.content}</span>
                                -------
                                <em>{item.name}</em>
                                <a href="##" onClick={this.del.bind(null,index,item.id)}>删除</a>
                                <a href="##" onClick={()=>this.check(index,item.id)}>修改</a>
                            </li>
                        ))
                    }
            </ul>
            
            {this.state.list.length!==0?<input type="button" value="清空"  onClick={this.clear}/>:null}
        </div>)

    }
    
    
}

//渲染dom
ReactDom.render(
    <ToDoList />
    ,
    document.querySelector('#root')
);