Lesson 15 实战分析:评论功能(二)
发布日期:2022-09-10 02:54:02 浏览次数:2 分类:技术文章

本文共 3882 字,大约阅读时间需要 12 分钟。

Lesson 15 实战分析:评论功能(二)

我们构建了基本的代码框架,现在开始完善其他的内容。

处理用户输入

我们从 ComponentInput 组件开始,学习 React.js 是如何处理用户输入的。首先修改 ComponentInput.js,完善 ComponentInputrender 函数中的 HTML 结构:

import React, {
Component } from 'react'class CommentInput extends Component {
render () {
return (
用户名:
评论内容:
</div> </div>
) }}export default CommentInput

在浏览器中可以看到 ComponentInput 的结构和样式都已经生效:

在这里插入图片描述
因为还没有加入处理逻辑,所以你输入内容,然后点击发布是不会有什么效果的。用户可输入内容一个是用户名(username),一个是评论内容(content),我们在组件的构造函数中初始化一个 state 来保存这两个状态:

...class CommentInput extends Component {
constructor () {
super() this.state = {
username: '', content: '' } } ...}...

然后给输入框设置 value 属性,让它们的 value 值等于 this.state 里面相应的值:

...        
用户名:
评论内容:
</div> </div>...

可以看到接受用户名输入的 <input /> 和接受用户评论内容的 <textarea />value 值分别由 state.usernamestate.content 控制。这时候你到浏览器里面去输入内容看看,你会发现你什么都输入不了。

这是为什么呢?React.js 认为所有的状态都应该由 React.js 的 state 控制,只要类似于 <input /><textarea /><select /> 这样的输入控件被设置了 value 值,那么它们的值永远以被设置的值为准。值不变,value 就不会变化。

例如,上面设置了 <input />valuethis.state.usernameusernameconstructor 中被初始化为空字符串。即使用户在输入框里面尝试输入内容了,还是没有改变 this.state.username 是空字符串的事实。

所以应该怎么做才能把用户内容输入更新到输入框当中呢?在 React.js 当中必须要用 setState 才能更新组件的内容,所以我们需要做的就是:监听输入框的 onChange 事件,然后获取到用户输入的内容,再通过 setState 的方式更新 state 中的 username,这样 input 的内容才会更新。

...    
...

上面的代码给 input 加上了 onChange 事件监听,绑定到 this.handleUsernameChange 方法中,该方法实现如下:

...  handleUsernameChange (event) {
this.setState({
username: event.target.value }) }...

在这个方法中,我们通过 event.target.value 获取 <input /> 中用户输入的内容,然后通过 setState 把它设置到 state.username 当中,这时候组件的内容就会更新,inputvalue 值就会得到更新并显示到输入框内。这时候输入已经没有问题了:

在这里插入图片描述
类似于 <input /><select /><textarea> 这些元素的 value 值被 React.js 所控制、渲染的组件,在 React.js 当中被称为受控组件(Controlled Component)。对于用户可输入的控件,一般都可以让它们成为受控组件,这是 React.js 所推崇的做法。另外还有非受控组件,这里暂时不提及。

同样地,让 <textarea /> 成为受控组件:

...  handleContentChange (event) {
this.setState({
content: event.target.value }) }...
评论内容:
</div> </div>...

向父组件传递数据

当用户在 CommentInput 里面输入完内容以后,点击发布,内容其实是需要显示到 CommentList 组件当中的。但这两个组件明显是单独的、分离的组件。我们再回顾一下之前是怎么划分组件的:

在这里插入图片描述
可以看到,CommentApp 组件将 CommentInputCommentList 组合起来,它是它们俩的父组件,可以充当桥接两个子组件的桥梁。所以当用户点击发布按钮的时候,我们就将 CommentInputstate 当中最新的评论数据传递给父组件 CommentApp ,然后让父组件把这个数据传递给 CommentList 进行渲染。

CommentInput 如何向 CommentApp 传递的数据?父组件 CommentApp 只需要通过 props 给子组件 CommentInput 传入一个回调函数。当用户点击发布按钮的时候,CommentInput 调用 props 中的回调函数并且将 state 传入该函数即可。

先给发布按钮添加事件:

...      
...

用户点击按钮的时候会调用 this.handleSubmit 方法:

...  handleSubmit () {
if (this.props.onSubmit) {
const {
username, content } = this.state this.props.onSubmit({
username, content}) } this.setState({
content: '' }) }...

handleSubmit 方法会判断 props 中是否传入了 onSubmit 属性。有的话就调用该函数,并且把用户输入的用户名和评论数据传入该函数。然后再通过 setState 清空用户输入的评论内容(但为了用户体验,保留输入的用户名)。

修改 CommentApp.js ,让它可以通过传入回调来获取到新增评论数据:

class CommentApp extends Component {
handleSubmitComment (comment) {
console.log(comment) } render() {
return (
) }}

CommentApp 中给 CommentInput 传入一个 onSubmit 属性,这个属性值是 CommentApp 自己的一个方法 handleSubmitComment。这样 CommentInput 就可以调用 this.props.onSubmit(…) 把数据传给 CommenApp

现在在 CommentInput 中输入完评论内容以后点击发布,就可以看到 CommentApp 在控制台打印的数据:

在这里插入图片描述
这样就顺利地把数据传递给了父组件,接下来我们开始处理评论列表相关的逻辑。

当前内容版权归 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请点击 .

最初的起点:

上一篇:

下一篇:

转载地址:https://blog.csdn.net/Mr_zzr/article/details/125780655 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Lesson 16 实战分析:评论功能(三)
下一篇:Lesson 14 实战分析:评论功能(一)

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月15日 15时40分20秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

php编码函数 base58,1. Base58可逆加密 2021-06-24
oracle 在需要下列之一,Oracle存储过程中PLS-00103:出现符号“/”在需要下列之一时:(... 2021-06-24
oracle10g dblink优化,Oracle10g通过dblink访问数据异常 2021-06-24
linux安装时的iso文件,直接用ISO文件在linux上安装新系统 2021-06-24
linux修改文件权限为所有人都可以访问,Linux 笔记分享八:文件权限的设定 2021-06-24
linux中卸载ambri-servle,Kerberos 命令使用 2021-06-24
linux二进制反编译,Xori:一款来自BlackHat 2018的二进制反汇编和静态分析工具 2021-06-24
linux两台主机添加信任,Linux两台机器间添加信任,实现不用密码问,互传文件... 2021-06-24
linux 自动获取ssl证书,linux生成自验证ssl证书的具体命令和步骤 2021-06-24
linux基础命令20个,20-linux中基础命令 2021-06-24
重置网络配置 android,重置Android移动网络信号? 2021-06-24
java约瑟夫环pta上_cdoj525-猴子选大王 (约瑟夫环) 2021-06-24
java++记录+运行_记录java+testng运行selenium(三)---xml、ini、excel、日志等配置 2021-06-24
mysql居左查询abcd_MySql速查手册 2021-06-24
loadrunner 错误: 无法找到 java.exe_LoadRunner错误及解决方法总结 2021-06-24
Java小魔女芭芭拉_沉迷蘑菇不可自拔,黏土人《小魔女学园》苏西·曼芭芭拉 图赏... 2021-06-24
php+mysql记事本_一个简单记事本php操作mysql辅助类创建 2021-06-24
300小时成为java程序员_直击面试现场: Java程序员3轮6小时面试, 成功拿到阿里offer!... 2021-06-24
中国网建java发送短信_短信验证登陆-中国网建提供的SMS短信平台 2021-06-24
隔行变色java代码_jquery入门—选择器实现隔行变色实例代码 2021-06-24