实例介绍
【实例截图】
【核心代码】
1.静态页面
2.初始化数据动态显示：comments[]
数据如果多个组件用，就放在父组件中
app：
1.给组件指定state属性
2.在render()中先取出来
3.将comments传递<List />
=>list：
1.声明接收什么类型的属性
2.在render()中先去出来
=>item：
1.item将list中<li></li>写入组件
2.接收comment对象，声明接收什么类型的属性
3.在render()中取出来
4.改写username，content为动态。
{comment.username}和{comment.content}
=>list:
<ul></ul>标签中，引入item组件，实现动态数据
{comment.map((comment,index) => <Item comment = {comment} key = {index}/>)}
3.交互:添加，删除
添加：
add：
1.绑定事件监听，onClick、onChange
提交onClick={this.handSubmit}
handSubmit = () =>{
<!-- 1.收集数据，并封装成comment对象
受控组件：1.定义state//初始化state
state{
username:'',content:''
}
=>在render中取出来
const {username,content} = this.state,
input中定义value={username} -->
const comment = this.state
<!-- 2.更新状态 =>app中定义addComment()-->
<!-- 3.清除输入数据 -->
this.setState({
username : '',
content : ''
})
}
handleNameChange = (event) = >{
const username = event.target.value
this.setState({username})
}
handleContentChange = (event) =>{
const content = event.target.value
this.setState({content})
}
=>app:
addComment = (comment) =>{
const {comments} = this.state
comments.unshift(comment)
this.setState({comments})
}
<Add addComment = {addComment}/>
=>add:
接收方法属性
static propTypes = {
addComment : PropTypes.func.isRequired
}
=>handSubmit = () =>{
const comment = this.state
this.props.addComment(comment)
this.setState({
username:'',
content:''
})
}
删除：
app:
1.删除评论的方法
deleteComment = (index) =>{
const {comments} = this.state
comments.splice(index,1)
this.setState({comments})
}
render()取出：const{deleteComment} = this.state
<List deleteComment = {this.deleteComment}/>
=>list:
static propTypes = {
deleteComment : PropTypes.func.isRequired
}
render()中取出
<ul>标签内，获取deleteComment = {deleteComment},index = {index}
=>item:
1.接收声明
static propTypes = {
deleteComment : PropTypes.func.isRequired,
index : PropTypes.number.isRequired
}
2.添加事件handleDel
handleDel = ()=>{
const {comment,deleteComment,index} = this.props
if(window.confrim(`确定删除&{comment.username}的评论吗？`)){
deleteComment(index)
}
}
3.判断删除为空：
const display = comments.length == 0 ? 'block' : 'none'
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论