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

Question

I'm new at programming at all especially in ReactJS. Actually I'm running into a problem.

I just wanna change the page. As simple as it sounds for me it is a 2 day Google-Search-Nothing-Found-Adventure without fun.

I made a component called <Frontpage /> It renders directly in the beginning but I want to change it with a click on a button.

This is my code:

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;

When I click it, it always says: "TypeError: Cannot read property 'state' of undefined"

I tried a lot but nothing worked.

Answer 1

Try something like this. Change you handleClick function to an arrow function and render the component based on the state.

Update : notice that i have used a Fragment to wrap the button and Question elements/components

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

You have to bind the handleClick to your class component or in other case, use an arrow function: To bind the method at the bottom of your state inside the constructor add this:

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

To use the arrow function change the syntax of your method as:

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

you have to bind the context to your handler https://reactjs.org/docs/handling-events.html

Answer 5

Try this one.

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;

Answer 6

Firstly, you need to bind your handle click or use arrow function like handleClick = () => {}

Secondly, For navigation use react-router