从React中的另一个无关组件调用一个组件的功能

Question

我正在使用ReactJS和Electron开发秒表应用程序。我有一个Timer组件，它可以跟踪时间并显示时钟&控件。

控件将由三个按钮组成：播放，暂停和停止。这些Button组件与Timer组件完全无关。

我的问题是：如果我在Timer组件中有一个handleStopClick()函数，我该如何从StopButton组件调用它？

注意：目前没有播放/暂停功能。定时器只需在安装时启动，单个停止按钮即可清除它。当我把这些东西整理出来的时候，我会补充剩下的。

这里是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

您可以通过handleStopClick方法进入onClick处理您的StopButton组件：

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

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

或者，因为它看起来像你有额外的东西哟ü要在单击StopButton时候做，你可以把它作为一个正常的道具和子组件的handleStopClick方法引用它：

// Timer 

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

// StopButton 

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