如何通过单击按钮更改渲染内部的组件？

Question

我是编程新手，尤其是 ReactJS。其实我遇到了问题。

我只是想换个页面。对我来说这听起来很简单，但它是一个没有乐趣的 2 天 Google-Search-Nothing-Found-Adventure。

我制作了一个名为<Frontpage />的组件 它在开始时直接呈现，但我想通过单击按钮来更改它。

这是我的代码：

import React from 'react';
import './App.css';
import Frontpage from './Frontpage'
import Question from './components/Question'


class App extends React.Component {
  constructor() {
    super()
    this.state = {
      showComponent: true,
    }
  }

  handleClick() {
    if (this.state.showComponent) {
      return <Question />
    } else {
      console.log("Something went wrong!")
    }
    // console.log("The button was clicked!")
    // document.getElementById('page')
    // document.getElementsByClassName('App-Header')
  }

  render() {

    return (
        <div className="App">
          <header className="App-header">
            <div id="page">
              <Frontpage />
            </div>
              <button id="button" onClick={this.handleClick}>Los geht's</button>
          </header>
        </div>
    );
  }
}


export default App;

当我点击它时，它总是说：“TypeError: Cannot read property 'state' of undefined”

我尝试了很多，但没有任何效果。

Answer 1

试试这样的。将 handleClick 函数更改为箭头函数并根据状态呈现组件。

更新：请注意我使用了Fragment 来包装button 和Question 元素/组件

import React,{Fragment} from 'react';
import './App.css';
import Frontpage from './Frontpage'
import Question from './components/Question'


class App extends React.Component {
  constructor() {
    super()
    this.state = {
      showComponent: false,
    }
  }

  handleClick =()=> {
     this.setState({showComponent:true})
  }

  render() {

    return (
        <div className="App">
          <header className="App-header">
            <div id="page">
              {this.state.showComponent? <Fragment><Question /><button id="button" onClick={this.handleClick}>Los geht's</button></Fragment> : <Frontpage /> }
            </div>
          </header>
        </div>
    );
  }
}


export default App;

Answer 2

您必须将handleClick 绑定到您的class component，或者在其他情况下，使用箭头函数： 要在state 底部的constructor 中绑定方法，请添加以下内容：

this.handleClick = this.handleClick.bind(this);

要使用 箭头函数，请将方法的语法更改为：

this.handleClick = () => {
    if (this.state.showComponent) {
      return <Question />
    } else {
      console.log("Something went wrong!")
    }
  }

Answer 3

import React from 'react';
import './App.css';
import Frontpage from './Frontpage'
import Question from './components/Question'


class App extends React.Component {
  constructor() {
    super()
    // Start with a hide component
    this.state = {
      showComponent: false,
    }
    //  Binding your function
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const { showComponent } = this.state;
    // Use state to trigger a re-render
    this.setState({
      showComponent: !showComponent;
    })
  }

  render() {
    const { showComponent } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <div id="page">
            {
              // Conditionally render a component
              showComponent
              ? (<Question />)
              : (<Frontpage />)
            }
          </div>
          <button id="button" onClick={this.handleClick}>Los get's</button>
        </header>
      </div>
    );
  }
}


export default App;

Answer 4

试试这个。

import Question from './components/Question'


class App extends React.Component {
  constructor() {
    super()
    this.state = {
      showComponent: true,
    }
  }

  handleClick() {
    this.setState({ showComponent: true });
  }

  render() {
    const { showComponent } = this.state;
    return (
        <div className="App">
          <header className="App-header">
            <div id="page">
              <Frontpage />
            </div>
            { showComponent ? <Question /> : null }
              <button id="button" onClick={this.handleClick.bind(this)}>Los geht's</button>
          </header>
        </div>
    );
  }
}

export default App;