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

Question

I have a CSS module called styles and this React code. It's a div with two buttons inside. I use the isMenuActive state to verify if the menu is active or not. If it is active, the CSS class 'active' gets in and the menu appears, otherwise not.

  <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>

When I click the buttons, nothing happens.

But If I store the button as a global variable in developer tools and run button.click() it works fine if I remove the template literals:

  <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>

It works fine.

Why??? And what should I do to keep changing the classes when isMenuActive changes?

Edit: Full code with the button that changes 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>
  )

New edit: The answer is in the comments by Pandaiolo. The problem was the onBlur={onBlur} code, when I removed it from the button everything worked fine!

Answer 1

To handle changing classnames you can use the classnames package to do something like this:

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

The isMenuActive is not defined. Place it in as a parameter as so:

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

I think the space is fine in your template literal, because it references two different class names. You probably want to use ${isMenuActive? styles.active:''} ${isMenuActive? styles.active:''} otherwise null becomes the string "null" , which is probably harmless unless you have a class .null that applies some styles, but that is basically not what you want.

But maybe the onBlur is called after the click?

1. click
2. button becomes focus
3. button blurs?

Not sure. But in that case it would toggle the state two times, cancelling its effect. Maybe try with just the onClick and without the onBlur at first?

And you can add a console.log('isMenuActive', isMenuActive) before the return statement to see it's value along rerenders, see if it matches what you expect.