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()
}

按钮onclick事件无法正常工作

3 个答案: