React制作简单的Todolist

Todolist

以下代码直接粘贴到React项目环境下即可使用

import {render} from "react-dom";
import React,{Component,createRef,forwardRef} from 'react'

// CURD
//DOTOLIST
//受控

class ToDoList extends Component {

  state = {
    title:'留言板',
    nikename:'雪雪',
    message:'所爱隔山海，山海皆可平',
    list:[
      // {id:1,nikename:'老王',message:'在么'},
      // {id:2,nikename:'你那谁',message:'直接说事，我好知道我在不在'},
    ],
    hasMessage:false,
    searchList:[],

    searchIpt:'的',
    searchKey:'message',
  };

  changeIpt = e => this.setState({[e.target.name]:e.target.value});

  add=()=>{
    alert(1)
    let {list,nikename,message} = this.state;

    this.setState({
      list:[...list,{id:list.length+1,nikename,message}],
      nikename:'',
      message:''
    })

  };

  del=(index,id)=>{
    this.state.list.splice(index, 1); //model 变化了，views层没有变化的
    this.setState({list:this.state.list})
  };

  clear = () => this.setState({list:[]})

  check=(index,id,key,value)=>{
    let tmpArr = [...this.state.list];
    tmpArr[index][key]=value;
    this.setState({list:tmpArr})
  };

  search=(key,content)=>{
    let result = this.state.list.filter((item,index,arr)=>item[key].includes(content));
    this.setState({searchList:result})
  };

  // search=(key,content)=>this.state.list.filter((item,index,arr)=>item[key].includes(content))

  render() {

    let {title,nikename,message,list,searchIpt,searchList} = this.state;

    return (

      <div>
        <h3>{title}</h3>

        <input type="text" name="nikename" value={nikename} onChange={this.changeIpt}/>

        <br/>

        <textarea type="text" name="message" value={message} onChange={this.changeIpt}></textarea>

        <br/>

        <button onClick={this.add}>增</button>

        <br/>

        <ul>
          {
            list.map((item,index)=>(
              <li key={item.id}>
                <span>{item.message}</span>
                --
                <i>{item.nikename}</i>
                <button onClick={this.del.bind(null,index,item.id)}>删</button>
                <button onClick={()=>this.check(index,item.id,'message','当我没说')}>改</button>
              </li>
            ))
          }
        </ul>

        <br/>

        <button onClick={this.clear}>清空</button>


        <hr/>

        <input type="text" name="searchIpt" value={searchIpt} onChange={this.changeIpt}/>
        <button onClick={()=>this.search(this.state.searchKey,this.state.searchIpt)}>查</button>


        <ol>
          {
            searchList.map((item,index)=>(
              <li key={item.id}>
                <span>{item.message}</span>
                --
                <i>{item.nikename}</i>
              </li>
            ))
          }
        </ol>


      </div>
    )
  }

}

render(
  <ToDoList/>,
  document.querySelector('#root'),
  () => console.log('render voer')
);