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

编程问答 2022-05-12

问题描述

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

  <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 更改时，我应该怎么做才能继续更改类？

编辑：带有更改 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} 代码，当我从按钮中删除它时一切正常！

解决方法

要处理更改的类名，您可以使用 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>
,

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>
  );
}
,

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

但也许 onBlur 在点击后被调用？

  1. 点击
  2. 按钮成为焦点
  3. 按钮模糊？

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

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

css-modulesjavascriptreact-css-modulesreactjsreactjsreactjsreactjs