событие onclick кнопки не работает должным образом

Question

в моем веб-приложении реагирования у меня есть кнопка поиска для извлечения данных из 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

Обработчик onClick должен быть связан с кнопкой className. Например, первый класс кнопки "btn" выглядит так:

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

Answer 2

Эта проблема исправлена.

при добавлении e.preventDefault ();оператор для функции onclick;

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

Спасибо всем за ответы, которые вы получили

Answer 3

Попробуйте использовать событие на кнопке, отличной от значка материала.Создание события на иконке материала не является проблемой.Если это не работает, попробуйте осмотреть кнопку и проверить, есть ли элемент над вашей кнопкой, который мешает значку прослушивать щелчок.

<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