javascript - 如何在 reactjs 调用周围包装 handleClick

Question

我正在尝试构建一个赛马应用程序并且是新手，当用户单击“开始”按钮让骑师参加比赛时，我正在努力处理点击事件。当我删除 handleClick 函数(如下面的注释)时，骑师会在我重新加载页面时自动进行比赛(使用 React 的进度条)。我只需要在单击“开始”按钮时使用该功能。

App.js

import React, { Component } from 'react';
import Progress from 'react-progressbar';
import logo from '../../images/logo.svg';
import './App.css';


class Jockey extends Component {
  state = {
    interval: Math.floor(Math.random() * 500),    
    progress: 5,
  }

  // handleClick = () => {
    // console.log('The link was clicked.');
    componentDidMount = () => {
      this.interval = setInterval(this.timer, this.state.interval);
    }

    timer = () => {
      this.setState({ progress: this.state.progress + 1 });
      // (this.state.progress >= 99) ? this.setState({ progress: 100 }) : "" ;
      if(this.state.progress >= 99) {
         this.setState({ progress: 100 }) 
      };
    }

  // } 

  render() {
    const Buttons = () => (
      <div className="App-buttons">
        <button className="ui primary button" onClick={this.handleClick}>Start</button>
        <button className="ui button">Reset</button>
      </div>
    );

    return (
      <div>
        <Buttons />
        <div className="App-field">
          <h1>Race Track</h1>
          <img src="https://avatars1.githubusercontent.com/u/3757315?v=4" alt=""/>
          <Progress className="App-progress" completed={this.state.progress}/>
          
        </div>
      </div>
    );
  }

}

export class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to the React Race Hustle</h1>
        </header>
        <Jockey />
      </div>
      
    );
  }
}

Answer 1

按原样使用您的代码(注释掉 handleClick)，componentDidMount() 函数将在组件安装时自动运行。这意味着 timer() 将在组件安装时按定义的时间间隔开始运行。

您需要进行两项更改:

1. 将 timer() 移到处理程序中
2. 将 componentDidMount() 函数移到处理程序之外

handleClick = () => {
  console.log('The link was clicked.');
  this.interval = setInterval(this.timer, this.state.interval);

  timer = () => {
    this.setState((prevState) => ({ progress: (prevState.progress + 1 > 98 ? 100 : prevState.progress + 1) });
  }
}

而且我们不再需要 componentDidMount() 函数。