React编写简单的评论功能

亦凉 2024-02-05 21:01 40阅读 0赞

## 一 效果展示 ##

![28a5be63dcea42f6a591be02cc6f5b82.png][]

## 二 代码 ##

### 2.1 a.js ###

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css'
    
    
    class App extends React.Component{
        //创建一个组件，是react中的组件，所以在之前必须要引入react
        state={
            message:"请发表评论",
            list:[]
        }
        changeValue=(e)=>{
            console.log(e.target)
            this.setState({
                message:e.target.value
            })
        }
        delContent=(index)=>{
            this.state.list.splice(index,1)
            this.setState({//更新
                list:this.state.list
                // message:""
            })
        }
        addContent=()=>{
            this.state.list.push({
                id:this.state.list[this.state.list.length-1]?this.state.list[this.state.list.length-1].id+1:1,
                content:this.state.message
            })
            this.setState({
                list:this.state.list,
                message:""
            })
        }
        render() {
            //组件渲染，这是必须有的
            return (
                <session>
                    <div className={"three"}>
                        <div>
                            <h1 className={'h1'}>评论区</h1>
                            <input type="text" value={this.state.message} placeholder={"请发表评论"} onChange={this.changeValue}/>
                            <br/><button onClick={this.addContent} className={'one'} ><span>评论</span></button>
                        </div>
                        <div>
                            <h4>精彩评论</h4>
                            <ul>
                                {
                                    this.state.list.map((item)=>{
                                        return(
                                            //return也是必须要包含的，js对象
                                            <li key={item.id}>
                                                <span>{item.content}</span>
                                                <br/><button onClick={this.delContent} className={'two'}><span>删除</span></button>
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                        </div>
                    </div>
                </session>
            );
        }
    }
    export default App

### 2.2 index.js ###

import React from "react";
    import ReactDOM from "react-dom";
    import App from "./a";
    ReactDOM.render(<App/>,document.getElementById("root"))

### 2.3 index.css ###

.one{
        position: relative;
        left:120%;
        top:-22px;
        color:black;
    }
    .two{
        color:black;
    }
    .three{
        position: absolute;
        left:20%;
    }
    h1{
        color: black;
        font-size: 32px;
    }

## 三 代码解析 ##

### 3.1 a.js ###

是一个React组件，使用了ES6的类语法来定义组件。该组件名为App。

在组件中，使用了state来存储组件的数据，包括message和list。message存储输入框的值，list存储评论内容。

在render方法中，将组件的结构渲染出来。包括一个输入框和一个评论区。

在输入框中，绑定了一个onChange事件，当输入框的值发生变化时，会调用changeValue方法来更新state中的message值。这样实现了实时更新输入框的值。

在评论区中，使用了map方法遍历state中的list，将每个评论内容渲染成一个li元素。同时给每个li元素设置一个key属性，以便React能够准确追踪每个元素的变化。

每个li元素中包含评论内容和一个删除按钮。点击删除按钮时，调用delContent方法来删除对应的评论。

最后，将App组件导出供其他模块(index.jsp)使用。

### 3.2 index.js ###

在React中渲染App组件，并将其挂载到HTML页面的根节点上。

首先，导入React和ReactDOM模块。

然后，导入了App组件，路径为"./a"。

接着，调用ReactDOM.render方法，将<App/>组件作为参数传入，并指定要挂载的目标元素为document.getElementById("root")，即HTML页面中具有id为"root"的元素。

这样，App组件就会被渲染并挂载到页面上的根节点中。

### 3.3 index.css ###

CSS样式的定义，用于给App组件中的元素添加样式。

.one类的样式：  
\`position: relative;\` 设置元素的定位方式为相对定位。  
\`left: 120%;\` 将元素相对于其正常位置向右移动120%的距离。  
\`top: -22px;\` 将元素相对于其正常位置向上移动22像素的距离。  
\`color: black;\` 设置文本颜色为黑色。

.two类的样式：  
\`color: black;\` 设置文本颜色为黑色。

.three类的样式：  
\`position: absolute;\` 设置元素的定位方式为绝对定位。  
\`left: 20%;\` 将元素相对于其最近的非静态定位祖先元素向右移动20%的距离。  
这个样式类没有提供其他样式。

h1元素的样式：  
\`color: black;\` 设置标题文本颜色为黑色。  
\`font-size: 32px;\` 设置标题的字体大小为32像素。

## 四 a.js详细解析 ##

### 4.1 ###

state={
            message:"请发表评论",
            list:[]
        }
    这段代码定义了App组件的初始状态（state）。App组件的state包含两个属性：
    
    `message`: 初始值为"请发表评论"，用于存储用户输入的评论内容。
    `list`: 初始值为空数组，用于存储评论列表的数据。
    
    这个初始状态将用于在组件渲染时进行显示和修改。

### 4.2 ###

changeValue=(e)=>{
            console.log(e.target)
            this.setState({
                message:e.target.value
            })
        }

这段代码定义了一个名为\`changeValue\`的函数，该函数是一个事件处理函数，用于处理输入框的值改变事件（onChange）。

当用户输入框的值发生改变时，该函数会被调用，并且会将输入框的新值（\`e.target.value\`）更新到组件的state中的\`message\`属性中。

通过调用\`setState\`方法来更新state，会触发组件的重新渲染，从而反映出最新的输入框的值的改变。

### 4.3 ###

delContent=(index)=>{
            this.state.list.splice(index,1)
            this.setState({//更新
                list:this.state.list
                // message:""
            })
        }

这段代码定义了一个名为\`delContent\`的函数，该函数用于删除列表中的某一项。

函数接受一个参数\`index\`，表示要删除的项在列表中的索引。

首先，使用**\`splice\`方法从\`this.state.list\`中删除指定索引的项**，即\`this.state.list.splice(index, 1)\`。

然后，通过调用\`setState\`方法来更新state，将删除后的新列表赋值给\`list\`属性，从而触发组件的重新渲染，反映出删除后的最新状态。

### 4.4 ###

addContent=()=>{
            this.state.list.push({
                id:this.state.list[this.state.list.length-1]?this.state.list[this.state.list.length-1].id+1:1,
                content:this.state.message
            })
            this.setState({
                list:this.state.list,
                message:""
            })
        }

这段代码定义了一个名为\`addContent\`的函数，该函数用于向列表中添加新的项。

首先，使用\`**push**\`方法向\`this.state.list\`中添加新的项。

新的项是一个包含\`id\`和\`content\`属性的对象。

\`id\`属性的值是列表中最后一项的\`id\`加1，如果列表为空则设置为1。

\`content\`属性的值是\`this.state.message\`，即当前的输入框内容。

然后，通过调用**\`setState\`方法来更新state**，将添加后的新列表赋值给\`list\`属性，并将\`message\`属性重置为空字符串，从而触发组件的重新渲染，反映出添加后的最新状态。

### 4.5 ###

<input type="text" value={this.state.message} placeholder={"请发表评论"} onChange={this.changeValue}/>
    <br/>
    button onClick={this.addContent} className={'one'} ><span>评论</span></button>

这段代码是一个包含一个输入框和一个按钮的 JSX 元素。它使用\`<input>\`标签来渲染一个文本输入框，并设置了以下属性：

\`type\`：设置输入框的类型为文本类型；  
\`value\`：将输入框的值绑定到\`this.state.message\`，即显示\`this.state.message\`作为输入框的初始值；  
\`placeholder\`：设置输入框的占位符文本为"请发表评论"；  
\`onChange\`：绑定\`this.changeValue\`函数作为输入框的\`change\`事件的处理函数。

这段代码还包含一个\`<button>\`标签，它使用了以下属性：

\`onClick\`：将\`this.addContent\`函数绑定到按钮的\`click\`事件，即点击按钮时触发\`this.addContent\`函数的执行；  
\`className\`：设置按钮的类名为"one"，用于自定义样式；  
\`children\`：将一个包含文本内容的\`<span>\`标签作为按钮的子元素，显示"评论"作为按钮的文本内容。

### 4.6 ###

this.state.list.map((item)=>{
                                return(
                                //return也是必须要包含的，js对象
                                <li key={item.id}>
                                        <span>{item.content}</span>
                                         <br/>
                                  <button onClick={this.delContent} className={'two'}><span>删除</span></button>
                                 </li>
                                        )
                                    })

这段代码是使用\`this.state.list.map()\`方法对\`this.state.list\`数组进行遍历，然后根据数组中的每个元素创建一个\`<li>\`元素。在\`<li>\`元素中，包含一个显示\`item.content\`的\`<span>\`元素和一个带有"删除"文本的按钮。

在每次循环时，都会为\`<li>\`元素设置一个\`key\`属性，使用\`item.id\`作为唯一标识。这是为了帮助React识别每个元素的唯一性，并进行高效的更新。

按钮的点击事件\`onClick\`被绑定到\`this.delContent\`函数，即点击按钮时触发\`this.delContent\`函数的执行。按钮的类名设置为"two"，用于自定义样式。

最后，通过使用\`return\`关键字将每个创建的\`<li>\`元素返回，并作为整个遍历结果的一部分。这样，遍历结果会被渲染到页面上。

[28a5be63dcea42f6a591be02cc6f5b82.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/8e3b57bb9c43420faed7c6e38a0e618c.png