Question

我正在尝试在fontawesome图标上设置onClick事件，但是当我这样做时它不起作用。

root

仅当我将onClick放在p标签或h标签上时才有效。

 <i class="fab fa-accessible-icon" onClick={this.removeItems}></i>

无法在图标本身上设置事件？这样做是第二种方式导致我出现样式错误。

编辑：我确实将类更改为className，不好。但它仍然没有工作，目前我绕过它使用图标和跨点上的onClick。

Answer 1

Here你可以查看反应文档，它解释了使用className而不是class。同时将unexpected token else代码包裹在<i>代码中，并在那里使用button功能。

Answer 2

也许试试

<i className="fab fa-accessible-icon" onClick={this.removeItems}></i>

我能够得到

<i onClick={doSomething}>Testing</i>

处理click事件，但它被渲染为jsx（ala render（）方法） - 假设你也是这样做的。

Answer 3

将类属性更改为ClassName <i className="fab fa-accessible-icon" onClick={this.removeItems}></i> 我认为它的工作。查看演示https://stackblitz.com/edit/react-nh2bqu

Answer 4

好吧它应该像下面那样工作......

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<i class="fa fa-cog" onClick="console.log('Clicked')"></i>

＆＃13;

如果它没有尝试将您的图标包装成button

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<button><i class="fa fa-cog" onClick="console.log('Clicked')"></i></button>

＆＃13;

Answer 5

您将JSX与HTML混淆。你的代码中的i标签不是普通的html标签，它是一个javascript对象（详细了解jsx here）。 React负责为您绑定事件，如果您无法在html中看到onClick，请不要担心。

Answer 6

如果您使用的是react-fontawesome，则可以使用FontAwesomeIcon组件，并设置ID和onClick：

def get_queryset(self, *args, **kwargs):
    q_ordered = []

    word = self.request.GET.get('q') # from search input

    # get objects with word in title, description or body
    q_objects = Q() 

    q_in_title          = Q(title__icontains=word)
    q_in_description    = Q(description__icontains=word)
    q_in_body           = Q(body__icontains=word)

    q_objects           |= Q(title__icontains=word)
    q_objects           |= Q(description__icontains=word)
    q_objects           |= Q(body__icontains=word)

    q_ordered += [obj for obj in q_objects if obj in q_in_title and obj in q_in_description and obj in q_in_body]

    q_ordered += [obj for obj in q_objects if ( obj in q_in_title and obj in q_in_description ) or ( obj in q_in_description and obj in q_in_body ) or ( obj in q_in_title and obj in q_in_body)]

    q_ordered += [obj for obj in q_objects if obj in q_in_title or obj in q_in_description or obj in q_in_body]

    qs = super().get_queryset(*args, **kwargs)
    qs = qs.filter(q_ordered)
    return qs

如何在一个字体真棒图标上放一个onClick事件做出反应？

6 个答案: