在按钮上渲染组件单击 React ES6答案

【问题标题】：render a component on button click React ES6在按钮上渲染组件单击 React ES6
【发布时间】：2017-02-22 09:18:48
【问题描述】：

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

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

    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>

    );
  }
}

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

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

所以不要这样：

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

使用这个：

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

【讨论】：

【解决方案2】：

你的实现在不让 React 知道的情况下改变了状态：根据documentation你看到了

setState()

执行 nextState 的浅合并成现在的状态。这是您用来触发 UI 的主要方法来自事件处理程序和服务器请求回调的更新。

第一个参数可以是一个对象（包含零个或多个要更新的键）或返回包含要更新的键的对象的函数（状态和道具）。

下面是简单的对象用法：

this.setState({mykey: 'my new value'});

因此，在您的情况下，您应该使用以下方式更新您的状态：

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

【讨论】：

谢谢。是的，我意识到了错误。我以错误的方式更新状态