javascript - 在按钮上渲染一个组件，单击 React ES6

Question

我想在单击按钮时打开/渲染/显示组件。我试图通过改变状态来做到这一点，但无法做到这一点。

我想在单击按钮时渲染组件。状态发生更改，但组件未呈现。

    export default class NewNav extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      login: false
    };
    this.handleClick = this.handleClick.bind(this);

  }

  handleClick(e) {
    this.state.login = true;
    }

  render() {

    const style = {
      margin: 12
    };

    return (
      <MuiThemeProvider>

        <div className="top-bar">
          <div className="top-bar-left">
            <ul className="menu">
              <li>
                <RaisedButton
                  label="Sign Up"
                  style={style}
                  primary={false}
                  onClick={this.handleClick}
                  labelColor="#FFF"
                  backgroundColor="#00E676"/>
              </li>

            </ul>
          </div>
          <div className="top-bar-right">

            <ul className="menu">

              <li>
                <RaisedButton
                  label="Log In"
                  primary={true}
                  className="btnLogin"
                  backgroundColor="#3AAA35"></RaisedButton>

              </li>

              <li>
                <RaisedButton
                  label="Sign Up"
                  primary={false}
                  labelColor="#FFF"
                  backgroundColor="#00E676"/>

              </li>

            </ul>
            {this.state.login
              ? <FirstPage/>
              : null
}

          </div>

        </div>
      </MuiThemeProvider>

    );
  }
}

Answer 1

不要直接设置state，使用setState方法。否则，React 无法感知状态变化，也不会重新渲染组件。

所以代替这个:

  handleClick(e) {
    this.state.login = true;
  }

使用这个:

  handleClick(e) {
    this.setState({login: true});
  }