react实现todolist

新建一个react项目 todolist

// 创建react项目
npx create-react-app todolist
// 进入到todolist文件夹里
cd todolist
// 运行项目
npm start

运行结果如图所示：

为了方便查看React组件树，安装扩展 React Devtools

// 进入src目录
cd src
// 删除src目录下的所有文件
del *
// 然后回到项目文件夹
cd ..

在src目录下新建文件index.js

import React, {
    Component } from 'react';
import ReactDom from 'react-dom';

// TodoList组件
class TodoList extends Component {
   
 render() {
   
   return (
     <div>
       TodoList
     </div>
   );
 }
}

ReactDom.render(<TodoList />,document.getElementById("root"));

写出todolist的基本结构

index.js

import React, {
    Component } from 'react';
import ReactDom from 'react-dom';

// TodoList组件
class TodoList extends Component {
   
  render() {
   
    return (
      <div>
        <input /><button>增加</button>
        <ul>
          <li>数据1<button>删除</button></li>
          <li>数据2<button>删除</button></li>
          <li>数据3<button>删除</button></li>
          <li>数据4<button>删除</button></li>
          <li>数据5<button>删除</button></li>
        </ul>
      </div>
    );
  }
}

ReactDom.render(<TodoList />,document.getElementById("root"));

用数组把数据存储起来

import React, {
    Component } from 'react';
import ReactDom from 'react-dom';

// TodoList组件
class TodoList extends Component {
   
  constructor(props){
   
    super(props);
    this.state = {
   
      todolist : ["数据1","数据2","数据3","数据4","数据5"]
    }
  }
  render() {
   
    return (
      <div>
        <input /><button>增加</button>
        <ul>
          {
   
            this.state.todolist.map((item,index) => {
   
              return <li key={
   index}>{
   item}<button>删除</button></li>
            })
          }
        </ul>
      </div>
    );
  }
}

ReactDom.render(<TodoList />,document.getElementById("root"));

监听输入框里面的内容,与state 里的inputValue绑定起来

import React, {
    Component } from 'react';
import ReactDom from 'react-dom';

// TodoList组件
class TodoList extends Component {
   
  constructor(props){
   
    super(props);
    this.state = {
   
      todolist : ["数据1","数据2","数据3","数据4","数据5"],
      inputValue : ''
    }
  }
  // 监听输入框里面的内容
  inputChange = (e) => {
   
    console.<