Question

我正在使用ReactJS和Electron制作秒表应用程序。我有一个定时器组件，可以跟踪时间并显示时钟和时钟。控件。

控件将由三个按钮组成：播放，暂停和停止。这些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时您似乎还想要做其他事情，您可以将其作为普通道具传递并在子组件{{1}中引用它方法：

handleStopClick

从React中另一个不相关的组件调用一个组件的函数

1 个答案: