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)