如何编写React函数组件

简介: 【8月更文挑战第17天】如何编写React函数组件

编写一个React函数组件时,我们首先要明确组件的目的和功能。这里,我将创建一个稍微复杂一点的React函数组件示例,该组件名为TodoList,用于展示和管理待办事项列表。这个组件将包括添加新待办事项、删除待办事项以及显示所有待办事项的功能。为了简化,我们将使用React的useState Hook来管理状态。

以下是TodoList组件的完整代码,包括注释以解释每个部分的功能:

import React, { useState } from 'react';

// 定义TodoList组件
function TodoList() {
  // 使用useState Hook来管理待办事项列表和输入值
  const [todos, setTodos] = useState([]); // 待办事项列表
  const [inputValue, setInputValue] = useState(''); // 输入框的值

  // 添加新待办事项的函数
  const addTodo = () => {
    // 忽略空字符串的待办事项
    if (inputValue.trim() !== '') {
      setTodos([...todos, { id: Date.now(), text: inputValue }]); // 创建一个新的待办事项并添加到列表中
      setInputValue(''); // 清空输入框
    }
  };

  // 删除待办事项的函数
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id)); // 通过id过滤掉要删除的待办事项
  };

  // 处理输入框值变化的函数
  const handleInputChange = (e) => {
    setInputValue(e.target.value); // 更新输入框的值
  };

  // 渲染待办事项列表
  const renderTodos = () => {
    return todos.map(todo => (
      <div key={todo.id}>
        <p>{todo.text}</p>
        <button onClick={() => deleteTodo(todo.id)}>删除</button>
      </div>
    ));
  };

  // 渲染组件
  return (
    <div>
      <h1>待办事项列表</h1>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="添加新待办事项"
      />
      <button onClick={addTodo}>添加</button>
      <div>
        {renderTodos()}
      </div>
    </div>
  );
}

export default TodoList;

在这个TodoList组件中,我们做了以下几件事:

  1. 状态管理:使用useState Hook来管理待办事项列表(todos)和输入框的值(inputValue)。

  2. 添加待办事项:定义了一个addTodo函数,当点击“添加”按钮时,会检查输入框是否为空,如果不为空,则创建一个新的待办事项对象并添加到列表中,然后清空输入框。

  3. 删除待办事项:定义了一个deleteTodo函数,它接受一个待办事项的ID作为参数,并使用filter方法来从列表中移除具有该ID的待办事项。

  4. 处理输入:定义了一个handleInputChange函数来处理输入框的值变化,并更新inputValue状态。

  5. 渲染待办事项:定义了一个renderTodos函数来遍历todos数组,并为每个待办事项渲染一个包含文本和删除按钮的div元素。

  6. 组件渲染:在组件的返回部分,我们渲染了一个包含标题、输入框、添加按钮和待办事项列表的div

这个TodoList组件展示了React函数组件和Hooks的强大功能,允许我们以声明式的方式管理UI的状态和行为。

目录
相关文章
|
2月前
|
缓存 前端开发 数据安全/隐私保护
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
168 68
|
2月前
|
缓存 前端开发 Java
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
147 67
|
2月前
|
前端开发 JavaScript 安全
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
154 62
|
5月前
|
移动开发 前端开发 API
React 音频播放器组件 Audio Player
本文介绍如何使用React创建音频播放器组件,涵盖核心功能如播放/暂停、进度条、音量控制和时间显示。通过HTML5 `&lt;audio&gt;` 元素和React的声明式状态管理,实现交互式音频播放。常见问题包括控件不响应、进度条无法更新和音量控制失灵,并提供解决方案。此外,还讨论了浏览器兼容性、异步错误处理和性能优化等易错点及避免方法。
439 123
|
4月前
|
前端开发 JavaScript
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
119 58
|
4月前
|
前端开发
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
150 57
|
4月前
|
前端开发 开发者
除了函数组件和类组件,React 还有其他创建组件的方式吗?
除了函数组件和类组件,React 还有其他创建组件的方式吗?
119 57
|
4月前
|
前端开发
如何在React Router中定义404错误页面组件?
如何在React Router中定义404错误页面组件?
121 57
|
4月前
|
前端开发
在 React 中使用高阶组件时,如何避免命名冲突?
在 React 中使用高阶组件时,如何避免命名冲突?
125 56
|
4月前
|
移动开发 前端开发 JavaScript
React音频播放列表组件:常见问题、易错点与解决方案
本文介绍了在React中实现音频播放列表时常见的挑战及解决方案。通过基础实现、常见问题分析和最佳实践,帮助开发者避免状态管理、生命周期控制和事件处理中的陷阱。关键点包括使用`useRef`操作音频元素、`useState`同步播放状态、全局状态管理防止多音频同时播放、以及通过`useEffect`清理资源。还提供了代码示例和跨浏览器兼容性处理方法,确保高效实现功能并减少调试时间。
161 30