React组件事件仅触发首个实例：Modal内操作触发Home实例回调

看起来你遇到的核心问题是类组件方法的this指向错误，外加DOM元素重复ID引发的潜在冲突，这两个因素共同导致Modal内的组件实例触发了页面实例的事件处理函数。

为什么会出现这个问题？ #

你的MyComp组件中，toggleHandler是普通类方法，没有正确绑定组件实例的this。当你直接把它作为onClick回调时，触发函数时this的指向并不是当前MyComp的实例（严格模式下甚至会是undefined）。而你看到打印owner is home，大概率是this意外指向了页面上的MyComp实例，导致读取了错误的props。

另外，两个MyComp实例的复选框共用同一个id="checkbox"，违反了HTML中id必须唯一的规则，浏览器可能会对重复ID的元素产生异常行为，进一步加剧了事件触发的混乱。

具体修复步骤 #

1. 正确绑定toggleHandler的this #

有三种常用方式解决类方法的this绑定问题，选其中一种即可：

方式一：在构造函数中绑定this

class MyComp extends Component {
  constructor(props) {
    super(props);
    // 将this绑定到当前组件实例
    this.toggleHandler = this.toggleHandler.bind(this);
  }

  toggleHandler(){
    const {owner} = this.props;
    console.log("owner is : ", owner);
  }

  render(){
    return(
      <div className="checkbox_style">
        <input type="checkbox" id={`checkbox-${this.props.owner}`} onClick={this.toggleHandler} />
      </div>
    );
  }
}

方式二：使用箭头函数定义类方法

箭头函数会自动绑定当前上下文的this，无需手动绑定：

class MyComp extends Component {
  // 箭头函数自动绑定组件实例的this
  toggleHandler = () => {
    const {owner} = this.props;
    console.log("owner is : ", owner);
  }

  render(){
    return(
      <div className="checkbox_style">
        <input type="checkbox" id={`checkbox-${this.props.owner}`} onClick={this.toggleHandler} />
      </div>
    );
  }
}

方式三：在onClick中用箭头函数包裹

这种方式每次渲染会创建新函数，性能影响极小，适合简单场景：

class MyComp extends Component {
  toggleHandler(){
    const {owner} = this.props;
    console.log("owner is : ", owner);
  }

  render(){
    return(
      <div className="checkbox_style">
        <input type="checkbox" id={`checkbox-${this.props.owner}`} onClick={() => this.toggleHandler()} />
      </div>
    );
  }
}

2. 修复重复ID的问题 #

上面的代码中已经把复选框的id改为checkbox-${this.props.owner}，这样页面和Modal里的复选框ID分别是checkbox-home和checkbox-modal，保证了唯一性，避免浏览器的异常行为。

3. 关于shouldComponentUpdate的问题 #

你之前尝试用shouldComponentUpdate解决问题，但这找错了方向——这个生命周期函数是用来控制组件是否重渲染的，而你的问题根源是事件绑定的this指向错误，所以这个方法自然无法解决问题。

验证修复效果 #

完成上述修改后，点击Modal内的复选框，控制台应该会打印owner is modal，Modal组件也能正常触发重渲染了。

内容的提问来源于stack exchange，提问作者Varun G