javascript - react 状态变化不会导致重新渲染

我试图在单击单独的div时切换div的可见性。问题是它将div设置为在第一次单击时不可见，并且仅在可见时才设置为不可见。之后，它将保持不可见并且不会更新。但是，状态仍在控制台中切换。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(){
    super()
    this.state = {
      vis: '0'
    }
  }

  toghide=()=>{
    console.log("toggle login", this.state.vis)
    if(this.state.vis === "hidden"){
      console.log('showing')
      this.setState((state, props)=>({vis:'0'}))
    } else {
      console.log('hiding')
      this.setState((state, props)=>({vis:'hidden'}))
    }
  }

  render() {

    const styles = {
      visibility: this.state.vis
    }

    return (
      <div className="App">
        <div className="salebar"><a className="salebar sale"
href="login">Click here!</a></div>
        <div className="navbar">
            <div className="nav"><div className="nnav">JMZ</div></div>
            <div className="nav2"><div className="nnav2">PRODUCTS</div></div>
            <div className="loginContainer"><div className="login" onClick={this.toghide}>LOGIN/SIGN UP</div></div>
        </div>
        <div className="login-container">
          <div className="lognester">
            <div style={styles} className="login-tab">
              <input className="user" type="text" placeholder="Username"/>
              <input className="password" type="password" placeholder="Password"/>
              <button className="user">Login</button>
          Sign in or <a className="register-link" href="register">register</a> a new account.
            </div>
          </div>
        </div>
        <div className="intro-pics"></div>
        <div className="content"></div>

        <audio preload loop controls autoPlay className="audio">
          <source src="https://memefly.me/i/toValhalla.mp3"/>
            Your browser does not support the audio element.
        </audio>
      </div>
    );
  }
}


export default App;

最佳答案

尝试这个：

class App extends Component {
  constructor() {
    super();
    this.state = {
      vis: true
    };
  }
  toghide = () => {
    this.setState({ vis: !this.state.vis });
  };
  render() {
    return (
      <div className="App">
        <div className="salebar">
          <a className="salebar sale" href="login">
            Click here
          </a>
        </div>
        <div className="navbar">
          <div className="nav">
            <div className="nnav">JMZ</div>
          </div>
          <div className="nav2">
            <div className="nnav2">PRODUCTS</div>
          </div>
          <div className="loginContainer">
            <div className="login" onClick={this.toghide}>
              LOGIN/SIGN UP
            </div>
          </div>
        </div>
        <div className="login-container">
          <div className="lognester">
            {this.state.vis ? (
              <div className="login-tab">
                <input className="user" type="text" placeholder="Username" />
                <input
                  className="password"
                  type="password"
                  placeholder="Password"
                />
                <button className="user">Login</button>
                Sign in or{' '}
                <a className="register-link" href="register">
                  register
                </a>{' '}
                a new account.
              </div>
            ) : (
                ''
              )}
          </div>
        </div>
        <div className="intro-pics" />
        <div className="content" />
      </div>
    );
  }
}
export default App;

这是演示：https://codesandbox.io/s/72zzk2xr70