javascript - 根据状态更改渲染组件

Question

我正在做一个非常简单的网站，其中有一个图像、几个 h1/2 元素和两个按钮。

我的目标是，当我单击登录按钮时，按钮消失，并出现一个包含登录表单的框。

与注册按钮相同，但带有注册框。

我正在渲染按钮或两个框之一，具体取决于状态，但到目前为止我的代码似乎无法正常工作。

每当我单击按钮时没有任何反应，如果我没有错的话它应该重新渲染，但它没有发生。

import React, { Component } from 'react';
import logo from '../logo.png';
import './css/AddGame.scss';
import AddGameButton from './AddGameButton';

class AddGame extends Component {
  constructor () {
    super();
    this.state = {
      pageState: "buttons",
    }
  }

  openLogin() {
    this.setState({
      pageState: "login",
    });
  }

  openRegister() {
    this.setState({
      pageState: "register",
    });
  }

  render() {
    return (
      <div className="AddGame">
        <img src={logo} />
        <h1><span>OPlist</span> estará disponible próximamente.</h1>
        <h2>¿Quieres contribuir añadiendo juegos?</h2>
        {(this.state.pageState == "buttons") ? <div>
          <AddGameButton onclick={this.openLogin} text="Entrar" buttonType="Login" /> <AddGameButton onclick={this.openRegister} text="Regístrate" buttonType="Register" />
        </div> : null}
        {(this.state.pageState == "login") ? <div>LOGIN</div> : null}
        {(this.state.pageState == "register") ? <div>register</div> : null}

      </div>
    );
  }
}

export default AddGame;

Answer 1

这是因为您的处理程序是从 AddGameButton 组件调用的，并且在该上下文中运行时它们将具有不同的 this。

(阅读 https://reactjs.org/docs/handling-events.html )

要么将它们定义为箭头函数，要么在构造函数中将 this 绑定(bind)到它们。

箭头函数方式

  openLogin = () => {
    this.setState({
      pageState: "login",
    });
  }

  openRegister = () => {
    this.setState({
      pageState: "register",
    });
  }

以构造函数方式绑定(bind)this

constructor () {
  super();
  this.state = {
    pageState: "buttons",
  }
  this.openLogin = this.openLogin.bind(this)
  this.openRegister = this.openRegister.bind(this)
}

演示地址:https://codesandbox.io/s/x7x1848yp