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：无法读取未定义的属性'state'”

我尝试了很多，但是没有用。

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底部的 bind 方法中添加以下内容：

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

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

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

Answer 3

end_table <- data.frame("Water_Year" =  c("1903", "1904"), "Skew" = c("skew_number_here", 
"skew_number_here"), "Kurtosis" = c("kurtosis_number_here", "kurtosis_number_here"))

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;

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

4 个答案: