React实现按钮点击切换布尔值的函数失效，寻求技术帮助

你的代码存在几个关键问题，导致无法实现预期的布尔值切换功能：

• 直接操作DOM不符合React的状态驱动范式，React应该通过状态管理UI变化，而非原生DOM操作
• document.getElementsByClassName('button')返回的是HTMLCollection元素集合，不是单个DOM元素，无法直接调用addEventListener方法，执行时会报错
• 你的函数只会在组件初始化时执行一次，即使绑定了点击事件，也不会在点击时重新计算返回值，因此verticalCompact的属性值不会更新

正确实现方式 #

在React中，我们需要使用useState钩子维护点击状态，通过点击事件切换状态值，再将状态绑定到目标属性上：

import { useState } from 'react';

// 在你的组件内部实现
const YourComponent = () => {
  // 初始化状态为false，代表未点击
  const [isButtonClicked, setIsButtonClicked] = useState(false);

  // 点击事件处理函数，切换布尔值
  const handleButtonClick = () => {
    setIsButtonClicked(prevState => !prevState);
  };

  return (
    <>
      {/* 给按钮绑定点击事件 */}
      <button className="button" onClick={handleButtonClick}>
        切换状态
      </button>
      {/* 将状态绑定到目标属性 */}
      <TargetComponent verticalCompact={isButtonClicked} />
    </>
  );
};

export default YourComponent;

关键说明 #

• useState用于创建组件内部状态，isButtonClicked存储当前布尔值，setIsButtonClicked用于更新状态
• 点击事件处理函数handleButtonClick通过prevState => !prevState实现状态切换，确保每次点击都取反当前值
• 直接将isButtonClicked绑定到verticalCompact属性，React会在状态更新时自动重新渲染组件，同步更新属性值

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