【 React -- 2/100 】使用React实现评论功能
2024-09-05 19:14:51
React| 组件化 | 递归 | 生成唯一ID
需要探究一下 .find() 和 findIndex() 的区别
import React from 'react'
import './commentsDemo.css'
class CommentsDemo extends React.Component{
// 初始化状态
state = {
comments: [
{ id: 1, name: 'cnyangx', content: '前排出售瓜子、汽水、辣条！！！' },
{ id: 2, name: '大脸猫', content: '沙发~' },
{ id: 3, name: '老张', content: '我有酒，你有故事吗' }
],
userName: '',
userContent: ''
};
handleForm = (e) => {
this.setState({
[e.target.name] : e.target.value
})
};
// 验证id唯一性
verifyID = () => {
const newID = Math.floor(Math.random() * 100000);
const flag = this.state.comments.find( item => item.id === newID);
console.log(flag)
if(flag === -1){
this.verifyID()
}
return newID;
};
// 发表评论
publishComments = () => {
const {comments, userName, userContent} = this.state;
if(userName.trim()==='' || userContent.trim() === ''){
alert('请输入内容');
return
}
// 将新的评论添加到集合中
const newComments = [
{
id: this.verifyID(),
name: userName,
content: userContent
},
...comments
];
console.log(newComments);
this.setState({
comments: newComments
})
};
renderList = () => {
return this.state.comments.length === 0 ?
(<div className="no-comments">暂无评论，快去抢沙发吧！</div>) :
(
<ul>
{
this.state.comments.map(item => (
<li key={item.id}>
<h4>评论人: {item.name}</h4>
<p>评论内容：{item.content}</p>
</li>
))
}
</ul>
)
};
render() {
const {userName, userContent} = this.state;
return (
<div className="app">
<div>
<input type="text"
name="userName"
value={userName}
onChange={this.handleForm}
className="user"
placeholder="请输入评论人"/>
<br/>
<textarea name="userContent"
className="content"
value={userContent}
onChange={this.handleForm}
cols="30" rows="10"
placeholder="请输入评论内容">
</textarea>
<br/>
<button onClick={this.publishComments}>发表评论</button>
</div>
{/* 渲染评论列表 使用三元表达式 */}
{ this.renderList() }
</div>
)
}
}
// 导出
export default CommentsDemo;
使用ReactDOM.render( <CommentsDemo />, document.getElementByID('root))
渲染组件
最新文章
- Protocols
- Java标识符和关键字
- Nokia Lumia通过电脑来升级Windows Phone 8.1
- CI框架引入外部css和js文件
- Qt学习笔记：Qt中使用Lua
- [学习嵌入式开发板]iTOP-4412实现NFS网络文件系统
- 如何在postgresql中模拟oracle的dual表，来测试数据库最基本的连接功能？
- Lua利用cjson读写json示例分享
- js 数组去重 的5种方法
- iOS block简单传值
- SQLite入门与分析(八)---存储模型(3)
- XML&DTD&XML Schema学习
- jquery 随机数
- 讨论一下PHP相关技能的层次
- 阿里云oss总是提示SignatureDoesNotMatch错误怎么办
- 【转义字符】HTML 字符实体&lt; &gt: &amp;
- JNI学习笔记_Java调用C —— 非Android中使用的方法
- 【详记MySql问题大全集】三、安装之后没有my.ini配置文件怎么办
- MyBatis动态SQL（认真看看， 以后写SQL就爽多了）
- Python简介及环境安装