最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Font-Awesome: Can I make icon clickable? - Stack Overflow

programmeradmin0浏览0评论

I'm using a trash can icon in a react-table row, and I want to delete the row when the icon is clicked (my knowledge of HTML/JS is very basic). But when I put an onClick handler either in or around the icon, it fires as the page is rendered, and not at all when the icon is clicked.

Here is my current row definition. I've tried div and span, and I tried using a button, but the icon didn't display correctly:

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

Can someone please tell me what I'm doing wrong?

I'm using a trash can icon in a react-table row, and I want to delete the row when the icon is clicked (my knowledge of HTML/JS is very basic). But when I put an onClick handler either in or around the icon, it fires as the page is rendered, and not at all when the icon is clicked.

Here is my current row definition. I've tried div and span, and I tried using a button, but the icon didn't display correctly:

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

Can someone please tell me what I'm doing wrong?

Share Improve this question asked May 1, 2018 at 22:21 aatuc210aatuc210 1,8689 gold badges36 silver badges74 bronze badges 2
  • Possible duplicate of React onClick event – Dan O Commented May 1, 2018 at 22:28
  • You should also probably be using a button instead of a div – djfdev Commented May 1, 2018 at 22:38
Add a ment  | 

3 Answers 3

Reset to default 7

React event bindings do not work without an actual function wrapper.

Try it as onClick={()=>{alert('clicked')}}

See also: these docs.

You certainly can make icons clickable. You could go one of two routes I can think of atm..

You can either surround the icon in an 'a' tag or you could use javascript to grab the element (probably getElementById) and add a click listener to it, with an easy function attached that executes your hearts desire.

Hope that helps

You don't need the brackets.

You can just have the function as alert('clicked') or you can define a function inside of your JavaScript and link to it in the onclick of the span.

发布评论

评论列表(0)

  1. 暂无评论