Question

不确定此问题的标题是否描述了我所挣扎的内容。这是一个骑师计划。如果我想添加多个竞争对手完成比赛的骑师，我该怎么做？它只适用于一个骑师，然而，当我尝试添加第二个/多个骑师时，我遇到问题。我在逻辑上哪里失败了？

App.js

＆＃13;

import React, { Component } from 'react';
import logo from '../../images/logo.svg';
import { Jockey } from './Jockey';
import './App.css';


export class App extends Component {

  // handleClick = () => {
  //   // const that = this;
  //   this.interval = setInterval(() => {
  //     this.setState((previousState) => {
  //       if(previousState.progress >= 99){
  //          return { progress:100 }
  //       }
  //       return { progress: previousState.progress + 1 }
  //     });
  //   }, this.state.interval);
  // }

  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 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>
        {/* <Buttons /> */}
        <Jockey />
        {/* <Jockey /> */}
      </div>
      
    );
  }
}

＆＃13;

Jockey.js

＆＃13;

import React, { Component } from 'react';
import Progress from 'react-progressbar';

export class Jockey extends Component {
    constructor(props){
      super(props);
      this.state = {
        avatar: "https://avatars1.githubusercontent.com/u/3757315?v=4",
        interval: Math.floor(Math.random() * 500),
        progress: 0,
      }
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick = () => {
      // const that = this;
      this.interval = setInterval(() => {
        this.setState((previousState) => {
          if(previousState.progress >= 99){
             return { progress:100 }
          }
          return { progress: previousState.progress + 1 }
        });
      }, this.state.interval);
    }
  
    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">
            <img src={this.state.avatar} alt=""/>
            <Progress className="App-progress" completed={this.state.progress}/>
          </div>
        </div>
      );
    }
  
  }

＆＃13;

Answer 1

实际上在您的代码中，没有任何内容可以触发handleClick类中的Jockey事件，我假设您希望App类中的一个按钮同时启动所有的jockeys。

有不同的方法可以做到这一点：

第一种方法：使用＆＃34;切换道具＆＃34;在儿童中发射事件：

在父母的

：

handleClick = () => {
    this.setState({ start: true });
}
...
<Jockey start={this.state.start} />

儿童中的

：

componentWillReceiveProps(nextProps) {
    if (this.props.start === false && nextProps.start === true) {
        this.startInterval(); // handleClick function in your case
    }
}

第二种方法：将逻辑移动到父级，请务必使用不同的名称来声明多个setInterval。

第三种方法：使用ref属性执行子方法：

在父母的

：

handleClick = () => {
    this.jockey1.handleClick();
    this.jockey2.handleClick();
}
...
<Jockey ref={jockey => { this.jockey1 = jockey } />
<Jockey ref={jockey => { this.jockey2 = jockey } />

Reactjs：如何添加多个实例

1 个答案: