如何用TodoList对数据增删改查

TodoList案例

1.创建Todolist.js组件（增加）

index.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import TodolistAdd from './TodolistAdd'

ReactDOM.render(<TodolistAdd />, document.getElementById('root'));

TodolstAdd.js代码：
创建一个TodolistAdd文件

import React from 'react';
class TodolistAdd extends React.Component{
   
	//构造函数
    constructor(){
   
        super();
           //容易出错第一处少个等号
           //初始化一个数组用来接收值
        this.state={
   
            list:[1,4]
        }
    }
	//点击事件的函数
    handleClick(){
   
        //容易出错第二处多个等号
       	//从新设定数组里面的内容
        this.setState({
   
         //...扩展运算符 为了展开列表里面的值
            list:[...this.state.list,this.refs.Input.value]
        })
        // 输出后清空列表里面的值
         this.refs.Input.value='';
    }
//渲染
    render(){
   
        return(
            <React.Fragment>
                <input type='text' ref='Input'></input>
                <button onClick={
   this.handleClick.bind(this)}>添加</button>
            <ul>
              {
   
this.state.list.map((item,index)=>{
   
  //容易 第三处错误没返回值
       return  <li key={
   index}>{
   item}</li>
                        })
                    }
            </ul>
            </React.Fragment>
        )
    }
}
export default TodolistAdd;

this.setState(obj,faction)，修改state属性的函数，参数1是要更新的数据对象，参数2是回调函数，参数2的主要作用是，用于展示更新后的state数据

setState()方法是异步方法
如果在setState()函数外保存数据，有可能保存不了，因为保存时数据还没更新

2.对Todolist.js组件内容进行删除

index.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import TodolistDel from './TodolistDel';
ReactDOM.render(<TodolistDel />, document.getElementById('root'));

TodolstDel.js代码：
创建一个TodolistDel文件

import React from 'react';
class TodolistDel extends React.Component {
   
    constructor() {
   
        super();
        // 容易出错处为大括号
        this.state = {
   
            list: []
        }
    }
	//增加方法
    hanldeClick()