Question

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

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

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

我正在渲染按钮，或者根据状态显示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绑定到它们。

箭头功能方式

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

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

以this方式绑定constructor

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

演示在https://codesandbox.io/s/x7x1848yp

根据状态更改渲染的组件

1 个答案: