React.js：如何添加多个实例

Question

Not sure the Title of this question describes what I'm struggling with. This is a jockey program. If I want to add multiple jockeys competing to finish a race, How do I do that? It was working for just one jockey, however, when I try to add a second/multiple jockeys, I get issues. Where am I failing in the logic?

App.js

 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> ); } } 

Jockey.js

 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> ); } } 

Answer 1

Actually in your code, nothing can trigger the handleClick event in Jockey class, I assume you want one button in App class to start all jockeys at the same time.

There's different ways to do this :

1st Method : Use a "toggle prop" to fire event in children :

in Parent :

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

in Child :

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

2nd Method : Move the logic to the parent, be sure to use a different names to declare multiple setInterval.

3rd Method : Use the ref attribute to execute a child method :

in Parent :

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