如何通过toggle Switch开关状态控制对应div元素的显示与隐藏

实现步骤 #

1. 给组件添加内部state，用isChatOpen字段存储开关的开闭状态，默认可设为false（默认隐藏聊天窗口）
2. 实现状态更新方法，点击开关时切换isChatOpen的布尔值
3. 给Switch组件绑定checked属性，让开关的选中状态和state同步
4. 在渲染聊天框的位置添加条件判断，仅当isChatOpen为true时展示聊天窗口
5. 注意render方法只能返回一个根节点，所以需要把两个并列元素用空标签（Fragment）或者普通div包裹，避免语法报错

完整修改后代码 #

import { Component } from 'react';
// 如果你用的是Material UI组件需要提前引入相关依赖，不需要可以删除该行
import { FormControlLabel, Switch } from '@mui/material';

class MyApp extends Component {
  // 初始化state
  constructor(props) {
    super(props);
    this.state = {
      isChatOpen: false // 默认开关关闭，聊天框隐藏
    };
    // 提前绑定事件方法的this指向，避免每次render重复生成函数
    this.handleSwitchChange = this.handleSwitchChange.bind(this);
  }

  // 开关状态切换的处理方法
  handleSwitchChange(event) {
    this.setState({
      isChatOpen: event.target.checked
    });
  }

  render() { 
    return ( 
      <> {/* 空标签作为根容器，不会生成额外DOM节点 */}
        <FormControlLabel
          control={
            <Switch
              name="sector"
              color="primary"
              style={{paddingRight: "30px"}}
              checked={this.state.isChatOpen} // 绑定开关选中状态
              onChange={this.handleSwitchChange} // 绑定状态切换事件
            />
          }
          label="Sector 1"
        /> 
        {/* 条件渲染聊天窗口：isChatOpen为true时才渲染 */}
        {this.state.isChatOpen && (
          <div className="chatBody">
            This is my chat body
          </div>
        )}
      </>
    );
  }
}
export default MyApp;

可选实现说明 #

如果需要保留聊天框的DOM节点只是隐藏不展示，可以把条件渲染的部分改成控制display属性：

<div 
  className="chatBody" 
  style={{display: this.state.isChatOpen ? 'block' : 'none'}}
>
  This is my chat body
</div>

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