コールバック関数で呼び出されたときにthis.props関数がトリガされない - reactjs

Question

2つのコンポーネントが互いに通信するのに少し問題があります。

<ReopenRequestModal 
    {...this.state.ReopenModalData} 
    show={this.state.isReopenModalShown} 
    onHide={this.closeReopenModal} 
    onReopenRequestSubmitClick={this.changeSignOffStatus} 
    userInfo={this.props.userInfo} 
/> 

、その後、私の子コンポーネントで、私は、ユーザーが送信する前にテキストエリアが< 20個の文字を持っているかどうかを検証しようとしています：私の親コンポーネントでは、私はこのようなモーダル（子コンポーネント）に小道具を渡しますボタンをクリックすると表示されます。

<ActionButton 
     className="default" 
     buttonText="SUBMIT" 
     onClick={() => 
      (this.state.value < 20 ? 
      this.props.dispatch(notificationActions.addInfoNotification({ 
       title: 'Warning', 
       message: 'Justification text should be at least 20 characters long', 
      })) : this.props.onReopenRequestSubmitClick)} 
/> 

コールバック関数を使用しているため、実際のボタンをクリックしたときにのみトリガーされます。 this.props.dispatch関数は意図したとおりに機能しますが、親コンポーネント内にあるthis.props.onReopenRequestSubmitClickは機能しません。私は両方のアクションを自分で実行することができますが、3つの演算子を使用して2つを組み込もうとすると、それは機能しません。私は間違った方法でこれについて行くのですか？

Answer 1

あなたはこの関数を呼び出していません。 this.props.onReopenRequestSubmitClickの終わりに()を追加します。

<ActionButton 
     className="default" 
     buttonText="SUBMIT" 
     onClick={() => 
      (this.state.value < 20 ? 
      this.props.dispatch(notificationActions.addInfoNotification({ 
       title: 'Warning', 
       message: 'Justification text should be at least 20 characters long', 
      })) : this.props.onReopenRequestSubmitClick())} 
/>