如果我使用模板文字在 React 中切换 CSS 类，按钮将不起作用

Question

我有一个名为样式的 CSS 模块和这个 React 代码。这是一个 div 里面有两个按钮。我使用 isMenuActive 状态来验证菜单是否处于活动状态。如果它处于活动状态，则 CSS class 'active' 进入并显示菜单，否则不显示。

  <div className={`${styles.customerOptionsMenu} ${isMenuActive ? styles.active : null}`}>
    <button onClick={() => { console.log('hi') }}>
      <span className="material-icons">edit</span>Editar
    </button>
    <button onClick={() => {console.log('hi')}}>
      <span className="material-icons">delete</span>Deletar
    </button>
  </div>

当我点击按钮时，没有任何反应。

但是如果我将按钮存储为开发人员工具中的全局变量并且运行 button.click() 如果我删除模板文字它可以正常工作：

  <div className={styles.customerOptionsMenu + styles.active}>
    <button onClick={() => { console.log('hi') }}>
      <span className="material-icons">edit</span>Editar
    </button>
    <button onClick={() => {console.log('hi')}}>
      <span className="material-icons">delete</span>Deletar
    </button>
  </div>

它工作正常。

为什么？？？当 isMenuActive 更改时，我应该怎么做才能继续更改 classes？

编辑：包含更改 isMenuActive 按钮的完整代码

  const [isMenuActive, setIsMenuActive] = useState(false)
  const onBlur = () => { setIsMenuActive(!isMenuActive)}

  return(
    <td>
      <button onBlur={onBlur} className={styles.customerOptions} onClick={() => setIsMenuActive(!isMenuActive)}>
        <span className="material-icons">more_horiz</span>
      </button>
      <div className={`${styles.customerOptionsMenu} ${isMenuActive ? styles.active : null}`}>
        <button onClick={() => { console.log('hi') }}>
          <span className="material-icons">edit</span>Editar
        </button>
        <button onClick={() => {console.log('hi')}}>
          <span className="material-icons">delete</span>Deletar
        </button>
      </div>
    </td>
  )

新编辑：答案在 Pandaiolo 的评论中。问题是 onBlur={onBlur} 代码，当我从按钮中删除它时一切正常！

Answer 1

要处理更改的类名，您可以使用 classnames 包来执行如下操作：

import cx from "classnames";

<div className={cx(styles.customerOptionsMenu, { styles["active"]: isMenuActive })}>
    <button onClick={() => { console.log('hi') }}>
      <span className="material-icons">edit</span>Editar
    </button>
    <button onClick={() => {console.log('hi')}}>
      <span className="material-icons">delete</span>Deletar
    </button>
</div>

Answer 2

未定义 isMenuActive。将其作为参数放入：

export default function App(isMenuActive) {
  return (
    <div className="App">
  <div className={`${styles.customerOptionsMenu} ${isMenuActive ? styles.active : null}`}>
    <button onClick={() => { console.log('hi') }}>
      <span className="material-icons">edit</span>Editar
    </button>
    <button onClick={() => {console.log('hi')}}>
      <span className="material-icons">delete</span>Deletar
    </button>
  </div>
    </div>
  );
}

Answer 3

我认为 space 在您的模板文字中很好，因为它引用了两个不同的 class 名称。您可能想使用 ${isMenuActive ? styles.active :''}，否则 null 会变成 字符串 "null"，这可能是无害的，除非您有 class .null 应用了一些样式，但这基本上不是你想要的。

但也许onBlur是在点击之后调用的？

点击
按钮成为焦点
按钮模糊了？

不确定。但在那种情况下，它会切换状态两次，从而取消其效果。也许一开始只尝试 onClick 而没有 onBlur？

并且您可以在 return 语句之前添加一个 console.log('isMenuActive', isMenuActive) 以查看它在重新呈现时的价值，看看它是否符合您的预期。

如果我使用模板文字在 React 中切换 CSS 类，按钮将不起作用

Button doesn't work if I use template literals to toggle CSS classes in React

javascript

css

reactjs

css-modules

react-css-modules