请选择 进入手机版 | 继续访问电脑版
查看: 112|回复: 1

[经验分享] 【经验分享】解决React中使用同一个函数同时绑定多个事件和传值的解决思路

[复制链接]

1

主题

10

帖子

23

积分

新手上路

Rank: 1

积分
23
发表于 2018-12-9 14:50:20 | 显示全部楼层 |阅读模式
用户名密码输入后登陆使用React的实现思路:
[JavaScript] 纯文本查看 复制代码
<input type="text"
                                                               className="form-control login-input"
                                                               placeholder="用户名"
                                                               name="username"
                                                               value={this.state.username}
                                                               onKeyUp={e => this.onInputKeyUp(e)}
                                                               onChange={e => this.onInputChange(e)}/>

<input type="password"
                                                               className="form-control login-input"
                                                               placeholder="密码"
                                                               name="password"
                                                               value={this.state.password}
                                                               onKeyUp={e => this.onInputKeyUp(e)}
                                                               onChange={e => this.onInputChange(e)}/>


我们可以看到这里的用户名和密码都有一个name属性,因此我们可以使用这个name属性来进行参数的传递和数值的获取。
比如下面这种方法:
[JavaScript] 纯文本查看 复制代码
/**
     * 用户名和密码发生变化,所有的input改变放在一起
     * @param e
     */
    onInputChange(e) {
        // 获取input输入框的name信息
        let inputName = e.target.name,
            inputValue = e.target.value;

        this.setState({
            errMsg : '',
            // ES6 支持变量名是一个变量,支持的是一个不断改变的值
            [inputName]: inputValue
        })
    }



怎么样,我们巧妙地使用了ES6的语法,和参数的传递,解决了一个事件处理函数可以同时接受多个参数的解决方法。当然,我没让你需要提前在state中定义数据,而且二者的名称要完全相同才是可以的。








上一篇:【黑科技】简单绕过迅雷会员极速下载限制,两步带你点亮图标(Window+Mac电脑)
下一篇:【windows软件】推荐4款非常好用的屏幕录屏软件2019最新版,总有一个适合你
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案; 如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子分类或者标题加上【已解决】。
回复过本主题
的还回复过:

2

主题

11

帖子

27

积分

新手上路

Rank: 1

积分
27
发表于 2019-1-20 12:26:24 | 显示全部楼层
路过~
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案; 如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子分类或者标题加上【已解决】。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

微信扫一扫

我爱科技论坛(www.52tech.tech)旨在打造全网最大的免费资源共享平台。目前论坛包括考研资料、编程学习、黑科技/科学上网、开源软件等资源模块,竭力服务于正在学习道路上的每一个人。我爱科技论坛,爱科技,更爱分享。致力于营造一个资源丰富、内容完善的大型网络学习交流资源共享平台!

QQ|Archiver|手机版|小黑屋|我爱科技论坛 快乐学习交流

(请勿发布违反中华人民共和国法律法规的言论,会员观点不代表我爱科技论坛的官方立场)

Powered by Discuz! X3.4© 2001-2013 Technology Inc.

返回顶部 返回列表