React bind(this) 参数详解

<span onClick={this.historyMaterial.bind(this, materialName)} className={'label label-warning materialStatus'}>材料已更新点击查看历史材料</span>

 此时想 把参数 materialName 传递给方法 historyMaterial

在查询资料之前一直以为传参和接受参数的位置是一一对应的,今天查了资料才发现reac中的bind()有点不同

historyMaterial = (materialName, evt) => {
        const brotherOfMaterial = evt.target.nextSibling;
        const classList = rclUtil.getDeepVal(brotherOfMaterial, 'classList.value');
        if(classList && classList.indexOf('hide') > -1){
            brotherOfMaterial.classList.remove('hide');
        }else{
            brotherOfMaterial.classList.add('hide');
        }
        
        console.log('historyMaterial ->', evt, materialName);

    }

接受参数是第一个,而当前点击对象是后面的evt,正好相反

结论:react 通过 bind 方法来绑定参数,第一个参数指向 this,第二个参数开始才是事件函数接收到的参数

事件:this.handleclick.bind(this,要传的参数)

函数:handleclick(传过来的参数,event)

猜你喜欢

转载自blog.csdn.net/zlzbt/article/details/104798556
今日推荐