按鈕 onclick 事件無法正常工作

Question

在我的 React Web 應用程序中，我有一個用於從 API 獲取數據的搜索按鈕。

如果我把下面的代碼，它的工作

<div className="col m1 s1 ">             
<i className="material-icons" onClick={ ()=>this.handleJobSearchChange() } >search </i>
</div

但我的要求是把搜索圖標作為一個按鈕，所以我改變了這個代碼，如下所示。

<div className="col m1 s1 ">          
<button className="btn btn-active grey waves-effect waves-teel"><i className="material-icons" onClick={ ()=>this.handleJobSearchChange() } >search </i></button>
</div

即當我使用按鈕標簽時，它不起作用。 為什么？

相同的代碼適用於我代碼中的另一個組件。 我已經在兩個組件中導入了物化庫。 請讓我知道是什么問題以及如何解決它？

Answer 1

嘗試使用材質圖標以外的按鈕上的事件。 不過，在材質圖標上創建事件不是問題。 如果這不起作用，請嘗試檢查按鈕並檢查按鈕頂部是否有阻止圖標收聽點擊的元素。

<div className="col m1 s1 ">          
<button className="btn btn-active grey waves-effect waves-teel"onClick={ ()=>this.handleJobSearchChange() }>
<i className="material-icons" >search </i>
</button>
</div

Answer 2

此問題已修復。

當我添加 e.preventDefault(); 對 onclick 函數的聲明；

 handleJobSearchChange= (e)=>
      {
       e.preventDefault(); 
.......some code
}

感謝大家的回復

Answer 3

onClick 處理程序應該與按鈕 className 相關聯。 例如，第一個按鈕類“btn”如下所示：

btn.onClick {
 ()=>this.handleJobSearchChange()
}