React组件点击切换可见性失效问题排查

核心问题：方法未绑定this #

你的enable方法没有绑定组件实例的this，点击容器时this指向undefined，无法调用this.setState更新状态，因此组件切换逻辑完全没触发。

具体解决方式（任选其一即可） #

1. 构造函数内绑定this #

在组件构造函数中手动绑定方法的this指向：

constructor(props) {
  super(props);
  this.state = { isCalculatorVisible: false };
  // 添加这行绑定代码
  this.enable = this.enable.bind(this);
}

2. 箭头函数定义方法 #

用箭头函数定义enable方法，自动绑定组件实例的this：

enable = () => {
  console.log("Make calculator visibile");
  this.setState({
    isCalculatorVisible: true,
  });
}

3. 点击事件内用箭头函数包裹 #

在onClick事件中直接用箭头函数调用方法：

<Container onClick={() => this.enable()}>

额外需要修正的问题 #

• <p>标签不能嵌套块级元素（你的Container是styled.div，属于块级元素），外层的<p>需换成<div>或其他合法容器标签，避免DOM结构无效：

<div>
  {this.state.isCalculatorVisible ? (
    <CalculatorContainer />
  ) : null} {/* 空<p>可以直接用null替代，更简洁 */}
  <Container onClick={this.enable}>
    {/* ...图片代码 */}
  </Container>
</div>

• 图片的key={Math.random()}会导致每次渲染都重新生成key，触发图片重新挂载，若无特殊需求建议移除这个随机key。

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