Javascript 单击时作出反应

单击“下一步”按钮时，无法读取未定义的属性“handleCheck”，这是一个错误。有人能帮忙吗？先谢谢

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = { check: false };
  handleCheck = () => {
    console.log("hello");
    this.setState({ check: !this.state.check });
  };
  componentDidMount() {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }
  timer() {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }
  render() {
    return (
      <div>
        <p>hello</p>
        {this.state.check ? (
          <button onClick={this.timer}>Next</button>
        ) : (
          <div>button not showing </div>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

从“React”导入React；
从“react dom”导入react dom；
类应用程序扩展了React.Component{
状态={check:false}；
handleCheck=（）=>{
console.log（“你好”）；
this.setState（{check:！this.state.check}）；
};
componentDidMount（）{
设置超时（（）=>{
这个。handleCheck（）；
}, 10000);
}
计时器（）{
设置超时（（）=>{
这个。handleCheck（）；
}, 10000);
}
render（）{
返回(
你好

{this.state.check(
下一个
) : (
按钮不显示
)}
);
}
}
render（，document.getElementById（“容器”）；

计时器也应该是一个箭头函数，用于引用正确的

此

：

timer = () => {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }

解决此问题的另一种方法是将

此

绑定到

计时器

由于新状态取决于旧状态，因此

handleCheck

函数应如下所示：

handleCheck = () => {
    console.log("hello");
    this.setState(prevState => ({ check: !prevState.check }));
  };

---

这是

定时器

功能的绑定问题：

  timer = () => {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }

或单击更改

onClick

：

onClick={this.timer.bind(this)}

解决方案：

类应用程序扩展了React.Component{
状态={check:false}；
handleCheck=（）=>{
console.log（“你好”）；
this.setState（{check:！this.state.check}）；
};
componentDidMount（）{
设置超时（（）=>{
这个。handleCheck（）；
}, 10000);
}
计时器=（）=>{
设置超时（（）=>{
这个。handleCheck（）；
}, 10000);
}
render（）{
返回(
你好

{this.state.check(
下一个
) : (
按钮不显示
)}
);
}
}
render（，document.getElementById（“react root”）
将其设置为箭头功能：

  timer = () => {
    setTimeout(() => {
      this.handleCheck();
    }, 1000);
  }

// in the button
<button onClick={this.timer.bind(this)}>Next</button>
// or in the constructor
constructor(props) {
    super(props)
    this.timer = this.timer.bind(this)
}
<button onClick={this.timer)}>Next</button>

因此它被绑定到父范围
您需要将其绑定到计时器函数

<button onClick={this.timer.bind(this)}>Next</button>

下一步
您可以像其他用户所说的那样使用箭头功能，或者您也可以手动将其绑定到该功能：

  timer = () => {
    setTimeout(() => {
      this.handleCheck();
    }, 1000);
  }

// in the button
<button onClick={this.timer.bind(this)}>Next</button>
// or in the constructor
constructor(props) {
    super(props)
    this.timer = this.timer.bind(this)
}
<button onClick={this.timer)}>Next</button>

//在按钮中
下一个
//或者在构造函数中
建造师（道具）{
超级（道具）
this.timer=this.timer.bind（this）
}
下一个
您好，正如前面的人所说，您需要绑定（这个），其中一种方法就是这样做

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state =  { check: false };

    // This binding is necessary to make `this` work in the callback
    this.handleCheck = this.handleCheck.bind(this);
  }

这是因为当你输入一个函数时，这个类是无法到达的
bind在正则函数中解决这个问题
使用箭头函数时，此作用域不在此作用域上使用，而是从父作用域继承
这样地：
而不是：

  timer() {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }

这样做：

  timer = () => {
    setTimeout(() => {
      this.handleCheck();
    }, 10000);
  }

@红色男爵，请帮忙！是的！非常感谢。