React实现简单待办事项实践｜青训营React是一种用于构建用户界面的JavaScript库。它提供了一种声明式的

React是一种用于构建用户界面的JavaScript库。它提供了一种声明式的编程模型，使得开发人员可以方便地创建可复用的组件，并将这些组件组合成复杂的用户界面。React使用虚拟DOM（Virtual DOM）来管理界面的更新，通过比较虚拟DOM与实际DOM的差异，最小化了对实际DOM的操作，提高了性能。

在React中，可以使用ReactDOM.render()方法将虚拟DOM渲染到实际的HTML元素上。首先，通过React.createElement()函数创建虚拟DOM元素，该函数接受三个参数：元素名称、属性对象和子元素。然后，使用ReactDOM.render()方法将虚拟DOM渲染到指定的HTML元素上。

创建项目的相关文件夹

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框的双向绑定

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++;
}
  // 新增事件
  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,
    };
  }
  // 新增事件
  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
    })
  }
export default TodoList;

总结

掌握组件之间传值
添加事项

父组件定义添加事项方法,通过绑定传给子组件(Input)

子组件通过参数的形式将值给父组件

父组件得到值后进行业务处理

不能通过push添加,可以concat

axios可以通过post(url,obj)

添加事项值

原生react

input 绑定ref-------this.inputRef=createRef()-----this.inputRef.current.value

element-ui

document.querySelector('input').value

复选框选中

父组件将方法绑定给子组件

子组件通过参数将id传给父组件

父组件遍历,判断是否相等,取反

优化按需引入 pureComponent
条件渲染

本篇实践笔记记录了如何通过React实现，完全基于函数式组件的待办事项TodoList。并对实践题目进行了组件拆分，定下了初步的目录结构。实现了实践要求，完成简易待办事项案例。

React实现简单待办事项实践 ｜ 青训营

React实现简单待办事项实践｜青训营