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});
  }

Answer 2

您的实施正在改变状态而不让React知道它：根据{{3}}你看到的那个

setState()

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

第一个参数可以是一个对象（包含零个或多个要更新的键）或一个函数（state和props），它返回一个包含要更新的键的对象。

以下是简单的对象用法：

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

因此，在您的情况下，您应该使用以下内容更新您的州：

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

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

2 个答案: