Question

我正在尝试使用ES6进行React，我遇到了一个点，我试图通过点击一个按钮调用一个函数，并且从该函数我只需要调用该组件中的另一个函数，我们该怎么做是什么？

这里：

import React from 'react';


export default class StopWatch extends React.Component { 

    constructor (props) {
        super(props);
        this.state = {
            elapsed : 0,
            timer : 0,
            isStart : false
        }   


    }

    onStartClick () {   
      setInterval(
            () => this.tick1(), 100
        );       
    }
    tick1 () {
        console.log('tick starts');
     }

     getTimeSpan (elapsed) {
        let m = String(Math.floor(elapsed/1000/60)+100).substring(1);
        let s = String(Math.floor((elapsed%(1000*60))/1000)+100).substring(1);
        let ms = String(elapsed % 1000 + 1000).substring(1);
        return m+":"+s+"."+ms;
    }

    onResetClick () {
        console.log('on click of reset');
    }

    render() {

        return (
            <div>
                <h1>{this.getTimeSpan(this.state.elapsed)}</h1> <br/>
                <button type="button" onClick={this.onStartClick}>Start</button>
                <button type="button" onClick={this.onResetClick}>Reset</button>
            </div>
        );
    }
}

我在点击"onStartClick和“start button,”内部功能时调用了一个函数onStartClick，我正在尝试调用tick()函数，这是给我的错误。

有谁能建议我怎么做？

Answer 1

你重新绑定后的内容。在构造函数中执行一次，并且您将被设置为您想要使用该函数的任何位置：

constructor (props) {
    super(props);
    this.state = {
        elapsed : 0,
        timer : 0,
        isStart : false
    }

    this.onStartClick = this.onStartClick.bind(this)
    this.onResetClick = this.onResetClick.bind(this)
}

要完全了解此处发生的事情，请阅读：http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/

了解this如何工作对于做出反应至关重要 - 对于所有javascript编程都是如此。

如何在函数内获取反应js组件的上下文，即“this”？

1 个答案: