React toggle组件设置初始唯一默认状态/类且保留原有切换功能的问题

解决思路 #

现有逻辑用布尔值控制类名切换，只有两种状态，无法区分「未触发点击的初始状态」和「点击后收起状态」，我们只需要给state新增第三种初始状态，调整类名判断规则即可，原有点击切换逻辑可以完全保留，不会破坏现有功能。

具体修改点 #

1. 将expandedTray的初始值从false改为null，用来标记从未触发过点击的初始状态
2. 调整类名拼接逻辑，expandedTray为null时渲染默认类，其他情况按原有规则切换expanded-tray/minimize-tray

修改后完整代码 #

class ToggleIt extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 初始值改为null，标记未触发过点击
      expandedTray: null,
    }
    this.toggleExpandedTray = this.toggleExpandedTray.bind(this);
  }
  toggleExpandedTray() {
    // 原有切换逻辑不用改：!null = true，第一次点击默认切到展开状态，后续正常反转
    this.setState({ expandedTray: !this.state.expandedTray, });
  }
  render() {
    return (
        <div
          // 新增初始状态判断，default-tray可以替换成你需要的默认类名
          className={`something--isi-tray ${this.state.expandedTray === null ? 'default-tray' : this.state.expandedTray ? 'expanded-tray' : 'minimize-tray'}`}
          onClick={this.toggleExpandedTray}
        >
          <div className="something--isi-tray__content">
              <h3>{this.props.mainHeadingTitle}</h3>
           <div
                 data-rte-editelement
                 dangerouslySetInnerHTML={{
              __html: DOMPurify.sanitize(this.props.isiContent)
           }}
           />
          </div>
      </div>
    )
  }
}

如果需要第一次点击默认切到收起状态，只需要把toggle函数的逻辑改成this.setState({ expandedTray: this.state.expandedTray === null ? false : !this.state.expandedTray })即可。

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