从React中的另一个无关组件调用一个组件的功能
问题描述:
我正在使用ReactJS和Electron开发秒表应用程序。我有一个Timer组件,它可以跟踪时间并显示时钟&控件。从React中的另一个无关组件调用一个组件的功能
控件将由三个按钮组成:播放,暂停和停止。这些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)}>
■
</button>
);
}
}
export default StopButton;
答
您可以通过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();
}
我不认为我有我的组件的任何父子关系。根据我的理解,它们只是两个单独的.jsx文件。是否定义了“parentStopClick”,实例化并一次赋值? –
嗯......我得到一个'Uncaught TypeError:this.props.parentStopClick不是函数错误,现在我单击Stop按钮 –
父子关系来自'Timer'中的'StopButton'渲染 - 这就是如何从'Timer'传递道具。由于'StopButton'是用ES2015类语法编写的,如果你想引用实例的道具,你必须在[constructor method](http://*.com/a/34076378/7864431)中调用'super()' ('this.props')。 –