React入门：待办事项清单 | 豆包MarsCode AI刷题

用户81638635843
72 阅读4分钟

一、引言

本文简单介绍了React基础知识，并利用豆包MarsCode平台实现了一个代办事项清单。主要功能有新增待办事项、删除待办事项和标记待办事项状态。

二、React基础知识介绍

1、jsx语法

React采用jsx语法，每一个React组件都是一个JavaScript函数，会返回一些标签。jsx语法和html很像，但是有一些特定的规则。

  • 只能返回一个根元素，如果一个组件中包含多个元素，需要用<></>包裹
  • 使用驼峰命名法给大部分属性命名，而不是HTML中的短横线命名法。比如strokeWidth代替stroke-width，此外，由于class是保留字，因此在React中使用className代替。
  • 通过大括号传递变量、对象或调用JavaScript函数。比如在jsx中定义内联样式
export default function List() {
  return (
    <ul style={{
      backgroundColor: 'pink',
      color: 'white'
    }}>
      <li>豆包</li>
      <li>AI编程</li>
    </ul>
  );
}

这里其实是给style属性传递了一个对象，对象内属性名需要采用驼峰命名法。

2、列表渲染

在React中渲染列表，需要使用map()函数将列表数组转换成组件数组。如下是一个待办事项的数组：

  const todos = [
    { id: 1, text: '豆包', completed: false}, 
    { id: 2, text: 'AI编程', completed: true }
  ]

然后使用map函数转化成新的jsx节点数组：

const todoItems = todos.map((todo) => (
    <li key={todo.id}>
      <input
        type="checkbox"
        checked={todo.completed}
      />
      {todo.text}
    </li>
  ))

最后在组件中直接返回todoItems即可

return <ul>{todoItems}</ul>;

此外，可以使用filter()方法来筛选满足条件的项。
在渲染列表的时候，需要为数组中的每一项都指定一个key，需要唯一标识出各个数组项，但是不能使用数组下标作为key值。因为这个key值会帮助React识别哪些元素发生了变化、被增加或被删除，如果使用数组下标作为key值，在增加或删除了元素，下标对应的数组项会更新，React也会因为key对应的内容不同而重新渲染，从而影响性能。

3、事件响应

jsx能够直接绑定事件，通过onClick、onChange等属性传递事件处理函数。注意是传递一个事件处理函数，而非调用一个函数

const handleClick = {alert("处理点击事件")}
return <button onClick={handleClick}>按钮</button>

事件处理函数会接收一个事件对象作为唯一参数，可以使用这个对象读取相关事件信息。可以调用e.stopPropagation()来阻事件传播；阻止默认事件调用e.preventDefault()

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}

4、状态更新

使用useStateHook添加state变量，useState可以传入一个初始值，然后返回一个包含两个值的数组，第一个值是state变量，会保存上一次渲染的值，第二个值是state setter函数，可以更新state变量并触发React重新渲染组件。

function TodoList {
  const [todos, setTodos] = useState([]);
  const addTodo = (newTodo) => {
    if (newTodo.trim()!== '') {
      setTodos([...todos, newTodo]);
    }
  };

如上定义了todos数组，初始值为空数组，然后定义了增加待办事项处理函数，传入一个新的待办事项，并调用setTodos更新todos状态。

三、代办事项清单实现

1、创建项目

使用豆包MarsCode平台创建项目。在平台首页模板中找到React，点击使用后输入项目名称即可快速创建项目。

豆包MarsCode: 豆包 MarsCode - 模板

image.png

2、功能实现

需要实现的功能有：

  • 增加待办事项
  • 删除待办事项
  • 标记完成

首先需要确定待办事项的数据结构，一般有id、待办事项内容及完成情况，因此可以定义为：

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

对于待办事项列表使用数组存储，然后定义html结构和增加、删除、状态更新函数。最终实现如下：

import React, { useState } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

const App: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim()!== '') {
      setTodos([...todos, { id: todos.length + 1, text: newTodo, completed: false }]);
      setNewTodo('');
    }
  };

  const removeTodo = (id: number) => {
    const updatedTodos = todos.filter((todo) => todo.id!== id);
    setTodos(updatedTodos);
  };

  const toggleTodo = (id: number) => {
    const updatedTodos = todos.map((todo) =>
      todo.id === id? {...todo, completed:!todo.completed } : todo
    );
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>代办事项清单</h1>
      <input
        type="text"
        placeholder="添加新事项"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={addTodo}>添加</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            {todo.text}
            <button onClick={() => removeTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

更多React基础知识见官方文档：快速入门 – React 中文文档

avatar
文章
阅读
粉丝