React开发-某一组件Click事件关联其他组件时-bind函数的使用

1、场景一

背景：

实现点击"添加"按钮时 增加某一列元素，之后点击"删除"按钮，删除新增出的该列元素

 

问题：

"删除"按钮 要关联，这列元素中的下拉框元素，获取该下拉框的信息，以便重新绘制页面

 

解决：

“删除”按钮绑定的click事件修改为  this.click.bind(this,[具体索引值/该列下拉框元素引用])，这样在调用click事件时，就会把第二个参数的值传递到click()函数的第一个参数中

 

2、场景二

背景：React 异步setState()，后一个setState依赖前一次setState的结果

import React, { Component } from 'react';
class A extends Component {
    // xxx;
    
    setTime = (val)=>{
        this.setState({
                time:xxx
        }, this.setTimeByVal);
    }

    setTimeByVal = (val)=>{
        this.setState({
                time: val>0 ? xxx : xxx
        });
    }

    render() {
        return 

                    xxx
               
;
    }
}

问题：

参数 val 无法传到setTimeByVal函数中，永远是undefined

解决：

使用bind函数

import React, { Component } from 'react';
class A extends Component {
    // xxx;
    
    setTime = (val)=>{
        this.setState({
                time:xxx
        }, this.setTimeByVal.bind(this,val));
    }

    setTimeByVal = (val)=>{
        this.setState({
                time: val>0 ? xxx : xxx
        });
    }

    render() {
        return 

                    xxx
               
;
    }
}

 

参考博客：

https://www.cnblogs.com/libin-1/p/6069031.html

https://blog.csdn.net/qq_35388564/article/details/76040332