登录 ×

梨花寨前端技术交流平台!

html,css,js,html5,css3等

react中的bind(this)传参顺序问题

2018-10-22 17:55:52 | 浏览量:49 react

    常遇到一种情况,需要在在触发事件的时候传递些参数,以区分所在的是不同元素,进而处理业务逻辑。在使用react时,与jquery不同,通过本身dom对象的自定义属性来实现不是很方便,也不符合react的提倡。这里通过bind加传递参数来处理。会有些坑,需要注意,这里讲解下。

    举个例子,一个很常见的场景,表单提交的页面,如果有很多项目,这样需要为每项目设置一个state值,然后在用户填的时候,触发setSates事件设置值。

this.state = {
    urser: '',
    nickname:'',
    email:''
    。。。
};

setUser = () => {
    let val = e.target.value;
    this.setState({ user: val });

}
setNickname = () => {
    let val = e.target.value;
    this.setState({ nickname: val });

}
setEmail = () => {
    let val = e.target.value;
    this.setState({ email: val });

}
。。。
                    
<div><label>用户:</label><input type="text" onChange={this.setUser} /> </div>
<div><label>昵称:</label><input type="text" onChange={this.setNickname} /> </div>
<div><label>邮箱:</label><input type="text" onChange={this.setEmail} /> </div>
。。。。。
    按照这种模式,如果项多的话,需要些很多代码。这里改进一下:如果类型一致可以合并到一个函数来实现,只需要区分不同项目的state的name即可,这里使用bind,并获取参数的,代码如下:

this.state = {
    urser: '',
    nickname:'',
    email:''
    。。。
};

/**
 * 统一处理函数
 */
setDataHandle = (key, e) => {
    let val = e.target.value;
    this.setState({
        [key]: val
    })
}
                    
<div><label>用户:</label><input type="text" onChange={this.setUser.bind(this,'user')} /> </div>
<div><label>昵称:</label><input type="text" onChange={this.setNickname.bind(this,'nickname')} /> </div>
<div><label>邮箱:</label><input type="text" onChange={this.setEmail.bind(this,'email')} /> </div>
。。。。。
注意特殊的点,也是容易出错的地方:

setDataHandle = (key, e) => {
    let val = e.target.value;
    this.setState({
        [key]: val })
}
这里形参key,e的位置和{this.setUser.bind(this,'user')}调用时传参数this,user的位置是不一致的,如果一致反倒是取不到值的。

上一篇: js中setTimeout()时间参数设置为0

下一篇:

需求及问题提交:

点击图片更换数字

0.6484s