イベントハンドラ内の親コンポーネントから呼び出されたコールバックをコールし、変数を特定の値に再割り当て

Question

本質的に、親コンポーネントから渡されたコールバックを呼び出し、値を再割り当てします。私は、親コンポーネントの小道具から与えられたコールバック関数を呼び出すクラスメソッドを作成しようとしましたが、私はsetStateで無限ループを得ています。私が試したが現時点では複製できないような方法では、"callback is not a function"というエラーがスローされました。

おそらく、私は奇妙な方法でこれを表現しています。ここでは例です：

class ParentComponent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { parentState: true } 

    this._handleToggle = this._handleToggle.bind(this); 
    } 

    _handleToggle() { 
    this.setState({ parentState: !this.state.parentState }) 
    } 

    render() { 
    return (
     <ChildComponent 
     onSomeEvent={this._handleToggle} 
     /> 
    ) 
    } 
} 

class ChildComponent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.randomInteger = 8; 

    this._invokeCallback = this._invokeCallback.bind(this); 
    } 

    // this is where I'm having trouble 
    _invokeCallback(callback) { 

    callback(); 
    this.randomInteger = 0; 
    } 

    render() { 
    const { onSomeEvent } = this.props; 

    // Error 
    return (
     <button onClick={this._invokeCallback(onSomeEvent)} /> 
    ) 
    } 
} 

私はここから何をしたいですと、親コンポーネントから受け継がれたコールバックを呼び出した後に一定値にthis.randomIntegerを再割り当てすることです。私はここから何ができますか？

私の例に一部が不足しているか、不完全な場合はお詫び申し上げます。私はこれを書くために急いでいます。フレーズやサンプルコードで間違いを修正してください。前もって感謝します。

Answer 1

_invokeCallbackはすぐに実行されます。

により括弧に、ここでthis._invokeCallback(onSomeEvent)を引数を渡すには、_invokeCallback方法の結果にのonClickを設定しています。

これは、親でSETSTATEがそうで再び_invokeCallbackを実行子に再レンダリングする原因となり、無限ループを引き起こしているものです。また

render() { 
    const { onSomeEvent } = this.props 

    return (
    <button onClick={() => this._invokeCallback(onSomeEvent) } /> 
) 
} 

、あなたが_invokeCallbackからonSomeEvent機能を呼び出すことができます。

あなたはボタンがクリックされたときに_invokeCallbackのみが実行されようのonClickで無名関数を使用することができます方法：

_invokeCallback() { 
    this.props.onSomeEvent() 
    this.randomInteger = 0 
} 

render() { 
    return (
    <button onClick={ this._invokeCallback } /> 
) 
}