无法使用 React 中的按钮更改样式答案

【问题标题】：Can't change the style using a button in React无法使用 React 中的按钮更改样式
【发布时间】：2021-02-10 07:57:27
【问题描述】：

我正在尝试制作一个汉堡菜单，该菜单将隐藏或显示网站中其他部分的链接，但是当我尝试更改可见性时它不起作用。有人可以解释一下吗？

export default function Mainpage(){
import barrinha from './menu.svg'

var visivel = {
  visibility: "hidden"
}

var clicks = false;

function arrastar_pro_lado(){ 
  clicks = !clicks
  if(clicks == false){
     visivel = {visibility: "hidden"}
  }else{
    visivel = {visibility: "visible"}
  }
}
return(
        <div>
          <button id='barrinha' onClick={arrastar_pro_lado()}><img src={barrinha}/></button>
            <div id='menu' style={visivel}>
                <a >ver perfil</a>
                <a >criar eventos</a>
                <a >consultar eventos</a>
                <a >historico de eventos</a>
                <a >Sair</a>
            </div>
);}

【问题讨论】：

请注意，您正在立即执行该函数，而不是将其设置为回调/事件侦听器，onClick={arrastar_pro_lado()}，应该类似于onClick={arrastar_pro_lado}

标签： javascript css reactjs dom frontend

【解决方案1】：

你需要一个状态变量。你可以像这样使用 React 钩子 useState。

在您的点击处理程序中，使用将切换状态值的状态更新器函数调用 setVisible。

使用setState的updater函数形式很重要，因为下一个状态依赖于上一个状态。

简单地写setState(!state) 很诱人，但这可能会导致结果不一致。

改为写setState(prevState => !prevState)

import React, { useState } from 'react';
import barrinha from './menu.svg';

export default function Mainpage() {
  const [visible, setVisible] = useState(false);

  function arrastar_pro_lado() {
    setVisible((visible) => !visible);
  }

  const visivel = {
    visibility: visible ? 'visible' : 'hidden',
  };

  return (
    <div>
      <button id="barrinha" onClick={arrastar_pro_lado}>
        <img src={barrinha} />
      </button>
      <div id="menu" style={visivel}>
        <a>ver perfil</a>
        <a>criar eventos</a>
        <a>consultar eventos</a>
        <a>historico de eventos</a>
        <a>Sair</a>
      </div>
    </div>
  );
}

【讨论】：

谢谢，但我有一个问题。我什么时候应该使用 State 以及为什么。为什么不能将值 false 存储在变量中？
@babukinha 每次 React 调用你的函数组件时，变量都会被销毁并重新创建。而是使用状态。我建议阅读有关状态的文档。 pt-br.reactjs.org/docs/state-and-lifecycle.html
@babukinha 我还有一个链接供您阅读：useState 挂钩。 pt-br.reactjs.org/docs/hooks-state.html

【解决方案2】：

点击时，你需要改变状态以触发重新渲染：

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div>
      <button id='barrinha' onClick={() => setVisible(!visible)}>
        <img src='https://lh3.googleusercontent.com/-XxxUtSmCY-g/AAAAAAAAAAI/AAAAAAAARG0/at7iXI-hi94/photo.jpg?sz=32' />
      </button>
      <div id='menu' style={{ visibility: visible ? 'visible' : 'hidden' }}>
          <a >ver perfil</a>
          <a >criar eventos</a>
          <a >consultar eventos</a>
          <a >historico de eventos</a>
          <a >Sair</a>
      </div>
    </div>
  );
};
ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

【讨论】：

【解决方案3】：

import React, { useState } from 'react';
import barrinha from './menu.svg';

export default function Mainpage () {
  // local state
  const [isMenuVisible, setIsMenuVisible] = useState(false);

  function arrastar_pro_lado () {
    // when user click on button, change the previous status of Menu
    setIsMenuVisible(!isMenuVisible);
  }

  return (
    <div>
      <button id='barrinha' onClick={arrastar_pro_lado}>
        <img src={barrinha} />
      </button>
      <div id='menu' style={{ visibility: isMenuVisible ? 'hidden' : 'visible' }}>
        <a>ver perfil</a>
        <a>criar eventos</a>
        <a>consultar eventos</a>
        <a>historico de eventos</a>
        <a>Sair</a>
      </div>
    </div>
  );
}

【讨论】：