React编写简单的评论功能

一        效果展示

二        代码

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>`元素返回，并作为整个遍历结果的一部分。这样，遍历结果会被渲染到页面上。