react实现简易的todolist

1.受控元素实现todolist

	import {
   render} from 'react-dom'
	import React,{
   Component} from 'react'
	
	class ToDoList extends Component{
   
	
	    state = {
   
	        title:"记录",
	        name:'王',
	        message:'哈哈哈哈',
	        list:[],   // {id:1,name:'王',message:'哈哈哈哈'},
	        searchList:[],   // 搜索后的结果
	
	        searchIpt:'的',
	        searchKey:'message',
	
	        hasMessage:false,// 进行条件渲染的
	    };
	
	    render(){
   
	        let {
   title,name,message,list,searchList,searchIpt,searchKey} = this.state;
	        return(
	            <div>
	                <h2>{
   title}</h2>
	                <input type="text" name={
   'name'} value={
   name} onChange={
   this.changeIpt}/>
	                <br/>
	                <textarea name="message" value={
   message} onChange={
   this.changeIpt}></textarea>
	                <br/>
	                <button onClick={
   this.add}>添加</button>
	                <br/>
	                <ul>
	                    {
   list.length === 0 && <li>暂无数据</li>}
	                    {
   list.map((value,index) =>(
	                        <li key={
   value.id}>
	                           <span>{
   value.name}----{
   value.message}</span>
	                            <button onClick={
   this.del.bind(null,index,value.id)}>删除</button>
	                            <button onClick={
   ()=>{
   this.update(index,value.id,'message','啥也不是')}}