React 函数在 componentDidMount 上工作，但在 onClick 上不工作答案

【问题标题】：React function working on componentDidMount but not onClickReact 函数在 componentDidMount 上工作，但在 onClick 上不工作
【发布时间】：2026-02-09 07:50:02
【问题描述】：

如果我从这里更改我的代码

  componentDidMount(){
    let interval = setInterval(this.timer, 1000);
    this.setState({ secondsRemaining: this.state.secondsRemaining })
    this.setState({ interval: interval });
  };

到这里：

  startTime(){
    let interval = setInterval(this.timer, 1000);
    this.setState({ secondsRemaining: this.state.secondsRemaining })
    this.setState({ interval: interval });
  };

<p><input type="submit" value="Start Timer!" onClick={this.startTimer}/></p>

我会收到一条错误消息，提示 Cannot read property 'timer' of null 指向 let interval 行

我为什么会得到这个？（绑定错误？）

我认为下一部分会解决这个问题：

constructor(props) {
    super(props);
    this.state = {
      secondsRemaining: 10
    };
    this.timer = this.timer.bind(this);
  }

也许有些东西没有安装？我无法弄清楚为什么它在安装时有效，但在点击时无效

【问题讨论】：

你正在使用startTimer和startTime？
将 'this' 也绑定到 setInterval...

标签： javascript reactjs onclick

【解决方案1】：

您可能必须在构造函数中将this.timer = this.timer.bind(this); 更改为this.startTimer = this.startTimer.bind(this);。

【讨论】：

【解决方案2】：

您可以使用箭头函数进行绑定：

JSX

<p><input type="submit" value="Start Timer!" onClick={() => this.startTimer.bind(this)}/></p>

【讨论】：

我想接受这个，因为我以前用过它，但由于某种原因它不起作用？我在构造函数中需要什么？
在这种情况下不需要我的坏箭头功能，只是：
onClick={this.startTimer.bind(this)} - 只是绑定上下文:)