Как разместить событие onClick на значке шрифта awesome в React?

Может попробовать

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

Я смог получить

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

для обработки события щелчка, но оно было обработано как jsx (метод ala render ()) - при условии, что вы делаете то же самое.

Измените атрибут класса на ClassName <i className = "fab fa-accessible-icon" onClick = {this.removeItems}></i> Я думаю, это работа. проверьте демо https://stackblitz.com/edit/react-nh2bqu

Что ж, это должно работать, как показано ниже ...

<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.info('Clicked')"></i>

Если нет, попробуйте обернуть свой значок в button

<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.info('Clicked')"></i></button>

Здесь вы можете посмотреть в документации по реакции, в которой объясняется, как использовать className вместо class. Также оберните свой тег <i> в тег button и используйте там функцию onClick().

Вы путаете JSX с HTML. Тег i, который у вас есть в вашем коде, не является простым тегом html, это объект javascript (подробнее о jsx здесь). React позаботится о привязке событий за вас, не беспокойтесь, если вы не видите onClick в своем html.

Если вы используете React-fontawesome, вы можете использовать компонент FontAwesomeIcon и установить как id, так и onClick:

<FontAwesomeIcon id = {yourIdGoesHere} icon = {faEdit}  onClick = {this.editItem} />

...

editItem = event => {
  let idOfClickedIcon = event.currentTarget.id
  ...do something with the item associated with the id
}