onClick函數沒有調用方法

Question

我有一個React項目，當屬性isSelectedNumber將其狀態更改為true時，將呈現組件SubmitButton。 組件SubmitButton是一個可以單擊的按鈕，當使用onClick函數單擊按鈕時將調用方法，這將導致屬性isSubmitClicked更改為true，組件NextButton將呈現。

問題是只渲染SubmitButton，當我單擊組件SubmitButton的按鈕時，它不會呈現組件NextButton。

這是包裝器組件的一部分，如果條件為真，將呈現兩個組件。

{this.state.isSelectedNumber ?  <SubmitButton  handleClickSumbmit={this.handleClickSumbmit}/>  : null}
 {this.state.isSubmitClicked ?   <NextButton /> : null}

這是SubmitButton組件的一部分，其中onClick函數應調用handleCliclkSubmit方法來更改屬性狀態：

 <button type="button" onClick={this.props.handleClickSubmit}></button>

這是handleClickSubmit方法：

    handleClickSumbmit () {
      this.setState({
        isSubmitClicked: true
      });
  }

我想知道你是否知道會發生什么以及如何解決它。

Answer 1

你有拼寫錯誤

更改

  <button type="button" onClick={this.props.handleClickSubmit}></button>

至

   <button type="button" onClick={this.props.handleClickSumbmit}></button>

函數名稱在代碼中也沒有意義。 將handleClickSumbmit更改為handleClickSubmit，只要你有handleClickSumbmit

此外，由於您使用常規函數，您必須在構造函數中綁定它。 我希望你已經這樣做了。

Answer 2

我認為你應該檢查handleClickSubmit的調用，你將其稱為handleClickSumbmit ，也許這就是問題所在。