Font-Awesome：我可以让图标可点击吗？

Question

我在 react-table 行中使用了一个垃圾桶图标，我想在单击该图标时删除该行（我对 HTML/JS 的了解非常基础）。但是当我在图标中或图标周围放置一个onClick 处理程序时，它会在页面呈现时触发，而不是在单击图标时触发。

这是我当前的行定义。我试过div 和span，也试过用button，但图标显示不正确：

{
  width: 50,
  filterable: false,
  Cell: row => (
  <div align="center" onClick={alert("clicked")}>
    <i className="fa fa-trash-o"></i>
  </div>
  )
}

谁能告诉我我做错了什么？

Answer 1

如果没有实际的函数包装器，React 事件绑定将无法工作。

试试onClick={()=>{alert('clicked')}}

另请参阅：these docs。

Answer 2

您当然可以使图标可点击。你可以走我能想到的两条路线之一。

您可以将图标包围在“a”标签中，也可以使用 javascript 来抓取元素（可能是 getElementById）并为其添加点击监听器，并附加一个简单的函数来满足您的需求。

希望有帮助

Answer 3

你不需要括号。

您可以将函数设为alert('clicked')，或者您可以在 JavaScript 中定义一个函数并在跨度的 onclick 中链接到它。