更新状态重新显示组件

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

现在并没有一个真正的服务端去处理我们发送的请求 .. 不过可以模拟一下这个流程 .. 打开 CommentBox.js 这个组件 .. 找到 handleCommentSubmit 这个方法 ..

提交评论以后,用户在评论表单里填写的数据在这个方法里面可以得到 .. 得到新的评论,把它发给服务端,然后再设置一下组件的状态,如果状态发生变化,React 会重新显示这个组件 ..

这里先添加一个变量 .. 名字是 comments .. 先得到组件现有的评论内容 .. 这里就是 data 这个状态 .. this.state.data .. 然后再得到新的评论列表 .. 也就是现有的评论,加上用户刚刚提交的评论 ..

可以用一个 newComments 来表示这个新的评论列表 .. 它的值就是 comments 现有的评论列表 .. 用一个 concat .. 加上 .. comment .. 这个 comment 就是用户新提交的评论 ..

然后再使用一下 setState 重新设置一下组件的状态 .. this.setState .. 设置的是 data .. 它的值就是这个 newComments ..

再注释掉 constructor 里面的这个 setInterval .. 因为我们并没有把评论保存到服务端 .. 所以请求回来的评论列表,仍然是 comments.json 这个文件里的内容 ..

在 handleCommentSubmit 里面需要使用到 this .. 所以在下面的这个 this.handleCommentSubmit 的后面,可以给它绑定一个 this .. 一条评论内容有作者,发布日期还有评论内容组成 .. 这个发布日期你应该再处理一下 .. 下面我们可以手工设置一下评论的发布日期 ..

打开 CommentForm.js .. 在这个 this.props.onCommentSubmit 里面 .. 添加一个 date 属性 .. 它的值我们可以先手工的设置成 刚刚 .. 保存一下修改之后的文件 ..

回到浏览器 .. 在评论表单里输入点内容 .. 然后点击 提交 .. 添加的评论会立即出现在评论列表里面 .. 因为添加了新的评论,组件的状态有了变化 .. 所以 React 会重新显示组件发生变化的地方 ..

更新状态重新显示组件《 React 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点