React 小案例解析：轻松实现用户评论互动功能

2023-10-10 12:46:42

React构建动态用户评论功能：从零开始的详细指南

前言

React凭借其组件化、声明式编程等优势，已成为当下最流行的前端框架之一。本文将带您深入探讨一个小巧但实用的React应用——构建一个动态的用户评论列表。在本指南中，我们将了解如何创建一个评论表单，允许用户输入评论，并展示评论的发布者、发布时间，还将添加悬浮删除按钮。

步骤1：创建React项目

首先，使用create-react-app工具创建一个新的React项目：

npx create-react-app react-user-comments

步骤2：安装依赖项

我们需要安装必要的依赖项，包括axios：

npm install axios

步骤3：创建组件

在src文件夹中创建一个名为UserComment.js的文件，并添加以下代码：

import React, { useState } from 'react';

const UserComment = () => {
  // 设置状态
  const [comments, setComments] = useState([]);
  const [username, setUsername] = useState('');
  const [comment, setComment] = useState('');

  // 提交处理函数
  const handleSubmit = (e) => {
    e.preventDefault();

    // 创建新评论对象
    const newComment = {
      username,
      comment,
      timestamp: Date.now(),
    };

    // 更新评论列表
    setComments([...comments, newComment]);

    // 清空输入框
    setUsername('');
    setComment('');
  };

  // 删除评论处理函数
  const handleDeleteComment = (index) => {
    // 复制评论列表
    const newComments = [...comments];

    // 删除指定评论
    newComments.splice(index, 1);

    // 更新评论列表
    setComments(newComments);
  };

  return (
    <div>
      <h1>用户评论</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="用户名"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
        <textarea
          placeholder="评论内容"
          value={comment}
          onChange={(e) => setComment(e.target.value)}
        />
        <button type="submit">发布</button>
      </form>
      <ul>
        {comments.map((comment, index) => (
          <li key={comment.timestamp}>
            <div>
              <strong>{comment.username}</strong>
              <span>发表于 {new Date(comment.timestamp).toLocaleString()}</span>
            </div>
            <p>{comment.comment}</p>
            <button onClick={() => handleDeleteComment(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserComment;

步骤4：在App.js中使用组件

在App.js中，导入UserComment组件并将其渲染到页面：

import React from 'react';
import UserComment from './UserComment';

const App = () => {
  return (
    <div>
      <UserComment />
    </div>
  );
};

export default App;