使用react实现一个todoList

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。

推荐阅读

创建项目

npx create-react-app web 使用react脚手架创建项目，项目名称为web
cd web
code . 使用vscode打开文件夹

编写todoList的基本结构

import React, { Fragment } from "react";
class TodoList extends React.Component {
  render() {
    return (
      <Fragment>
        <div>
          <input></input>
          <button>提交</button>
        </div>
        <ul>
          <li>吃饭</li>
          <li>睡觉</li>
          <li>打豆豆</li>
        </ul>
      </Fragment >
    );
  }
}

export default TodoList;

实现input框的双向绑定

import React, { Fragment } from "react";
class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 输入框里面的内容
      inputValue: "",
    };
  }
  
  // 输入框内容发生改变的事件
  inputChange = e => {
    this.setState({
      inputValue: e.target.value,
    })
  }

  render() {
    return (
      <Fragment>
        <div>
          <input value={this.state.inputValue} onChange={this.inputChange}></input>
          <button>提交</button>
        </div>
        <ul>
          <li>吃饭</li>
          <li>睡觉</li>
          <li>打豆豆</li>
        </ul>
      </Fragment >
    );
  }
}

export default TodoList;

实现新增，删除功能

import React, { Fragment } from "react";
// 生成唯一id
let id = 0;
function generateID() {
  return id++;
}
class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 输入框里面的内容
      inputValue: "",
      // 事件列表
      todoList: [{ content: "吃饭", id: generateID() }, { content: "睡觉", id: generateID() }, { content: "打豆豆", id: generateID() }]
    };
  }

  // 输入框内容发生改变的事件
  inputAdd = e => {
    this.setState({
      inputValue: e.target.value,
    })
  }

  // 新增事件
  add = () => {
    this.setState({
      todoList: [...this.state.todoList, { content: this.state.inputValue, id: generateID() }],
      inputValue: "",
    })
  }

  // 删除事件
  delete = id => {
    this.setState({
      todoList: this.state.todoList.filter((item) => {
        return item.id !== id
      })
    })
  }

  render() {
    return (
      <Fragment>
        <div>
          <input value={this.state.inputValue} onChange={this.inputAdd}></input>
          <button onClick={this.add}>提交</button>
        </div>
        <ul>
          {
            this.state.todoList.map((todo) => {
              return (
                <li key={todo.id}>
                  <span>{todo.content}</span>
                  <button onClick={() => this.delete(todo.id)}>删除</button>
                </li>
              )
            })
          }
        </ul>
      </Fragment >
    );
  }
}

export default TodoList;

实现修改功能

import React, { Fragment } from "react";
// 生成唯一id
let id = 0;
function generateID() {
  return id++;
}
class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 输入框里面的内容
      inputValue: "",
      // 事件列表
      todoList: [{ content: "吃饭", id: generateID() }, { content: "睡觉", id: generateID() }, { content: "打豆豆", id: generateID() }],
      // 被修改的事件
      changeTodo: null,
    };
  }

  // 输入框内容发生改变的事件
  inputAdd = e => {
    this.setState({
      inputValue: e.target.value,
    })
  }

  // 新增事件
  add = () => {
    this.setState({
      todoList: [...this.state.todoList, { content: this.state.inputValue, id: generateID() }],
      inputValue: "",
    })
  }

  // 删除事件
  delete = id => {
    this.setState({
      todoList: this.state.todoList.filter((item) => {
        return item.id !== id
      })
    })
  }

  // 修改事件
  change = todo => {
    this.setState({
      changeTodo: todo
    })
  }

  // 修改框中内容更改事件
  inputChange = e => {
    let changeTodoCopy = { ...this.state.changeTodo };
    changeTodoCopy.content = e.target.value;
    this.setState({
      changeTodo: changeTodoCopy
    })
  }

  // 确认修改
  sureChange = () => {
    this.setState({
      todoList: this.state.todoList.map((item) => {
        if (item.id == this.state.changeTodo.id) {
          item.content = this.state.changeTodo.content
        }
        return item;
      }),
      changeTodo: null
    })
  }

  render() {
    return (
      <Fragment>
        <div>
          <input value={this.state.inputValue} onChange={this.inputAdd} placeholder={"输入新的事件"}></input>
          <button onClick={this.add}>确认新增</button>
          {this.state.changeTodo ? <Fragment>
            <input value={this.state.changeTodo.content} onChange={this.inputChange}></input>
            <button onClick={this.sureChange}>确认修改</button>
          </Fragment>
            : null}
        </div>
        <ul>
          {
            this.state.todoList.map((todo) => {
              return (
                <li key={todo.id}>
                  <span>{todo.content}</span>
                  <button onClick={() => this.delete(todo.id)}>删除</button>
                  <button onClick={() => this.change(todo)}>修改</button>
                </li>
              )
            })
          }
        </ul>
      </Fragment >
    );
  }
}

export default TodoList;

结束啦！