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