Reactの他の無関係のコンポーネントから1つのコンポーネントの機能を呼び出す

Question

ReactJSとElectronを使用してストップウォッチアプリを開発しています。私は時間を追跡し、時計&コントロールを表示するタイマーコンポーネントを持っています。

コントロールは、再生、一時停止、停止の3つのボタンで構成されます。これらのButtonコンポーネントは、Timerコンポーネントとはまったく関係ありません。

私の質問は：TimerコンポーネントにhandleStopClick()という関数がある場合、StopButtonコンポーネントから呼び出すにはどうすればいいですか？

注：再生/一時停止機能は現在ありません。 Timerはマウントされたときに開始され、1つのStopボタンでクリアされます。私はこれをソートしたときに残りを追加します。ここで

はTimer.jsxです：

import '../assets/css/App.css'; 
import React, { Component } from 'react'; 
import PlayButton from './PlayButton'; // No function 
import PauseButton from './PauseButton'; 
import StopButton from './StopButton'; 

class Timer extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isRunning: false, 
      secondsElapsed: 0 
     }; 
    } 

    getHours() { 
     return ('0' + Math.floor(this.state.secondsElapsed/3600)).slice(-2); 
    } 

    getMinutes() { 
     return ('0' + Math.floor(this.state.secondsElapsed/60) % 60).slice(-2); 
    } 

    getSeconds() { 
     return ('0' + this.state.secondsElapsed % 60).slice(-2); 
    } 

    handleStopClick() { 
     clearInterval(this.incrementer); 
    } 

    componentDidMount() { 
     this.isRunning = true; 
     console.log(this.isRunning); 

     var _this = this; // reference to component instance 

     this.incrementer = setInterval(() => { 
      _this.setState({ 
       secondsElapsed: (_this.state.secondsElapsed + 1) 
      }); 
     }, 1000) 
    } 

    playOrPauseButton() { 
     if (this.isRunning) {return <PauseButton />} 
     else {return <PlayButton />} 
    } 

    render() { 
     return (
      <div> 
       {this.playOrPauseButton()} 
       <StopButton /> <hr /> 
       {this.getHours()} : {this.getMinutes()} : {this.getSeconds()} 
      </div> 
     ); 
    } 
} 

export default Timer; 

そしてStopButton.jsx：

import '../assets/css/App.css'; 
import React, { Component } from 'react'; 
import Timer from './Timer'; 

class StopButton extends Component { 
    handleClick() { 
     console.log('this is: ', this); 
     Timer.handleStopClick() // here's where I'd like to call Timer's function 
    } 

    render() { 
     return (
      <button onClick={(e) => this.handleClick(e)}> 
       &#9632; 
      </button> 
     ); 
    } 
} 

export default StopButton; 

Answer 1

あなたのStopButtonコンポーネントのonClickハンドラにhandleStopClick方法を渡すことができます。

constructor(props) { 
    ... 
    this.handleStopClick = this.handleStopClick.bind(this); 
} 

render() { 
    return (
     ... 
     <StopButton onClick={this.handleStopClick}/> 
    ); 
} 

、またはあなたに追加のものがあるように見えるのでuはStopButtonをクリックしたときにやりたい、あなたが通常の小道具としてそれを渡し、子コンポーネントのhandleStopClick方法でそれを参照することができます

// Timer 

render() { 
    return (
     ... 
     <StopButton parentStopClick={this.handleStopClick}/> 
    ); 
} 

// StopButton 

handleStopClick() { 
    ... 
    this.props.parentStopClick(); 
}