React FontAwesome Icon не пропускает реквизиты для onClick - PullRequest
Новая
       6

React FontAwesome Icon не пропускает реквизиты для onClick

0 голосов
/ 15 января 2019

У меня есть веб-приложение реагирования, и я установил и импортировал библиотеку значков FontAwesome.

https://github.com/FortAwesome/react-fontawesome

 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faIgloo } from '@fortawesome/free-solid-svg-icons';
 import { faStar } from '@fortawesome/free-solid-svg-icons';

 library.add(faStar);

Я не могу получить реквизит от объекта при вызове onClick.

Похоже, что когда я нажимаю на иконку, я нажимаю кнопку реакции, и реквизит проходит нормально. Если я нажимаю прямо на иконку, onClick срабатывает, но реквизиты не передаются. 

<button  key={item.title} value={item.title} onClick={this.updateFavourites}>
<FontAwesomeIcon size="3x" icon="star" />                                
</button>


updateFavourites = event => {

    console.log("IN UPDATE FAVOURITES" + event.target.value);
    this.setState({
        selectedFavourite: event.target.value    
      });


      if (this.state.favourites.includes(event.target.value)){
        // Find and remove item from an array
        var i = this.state.favourites.indexOf(event.target.value);
        if(i !== -1) {
            this.state.favourites.splice(i, 1);
        }  
      }
      else{
        this.state.favourites.push(event.target.value);   
      }
}

Что я делаю не так? Я прочитал все посты, связанные с этой проблемой, которые смог найти.

Спасибо за помощь

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Я решил свою проблему, передав функции updateFavourites значение в качестве аргумента, вместо того, чтобы пытаться получить значение от объекта через реквизит.

Изменения ниже.

функция updateFavourites: 

 updateFavourites = event => {

    console.log("IN UPDATE FAVOURITES" + event);
    this.setState({
        selectedFavourite: event 
      });


      if (this.state.favourites.includes(event)){
        // Find and remove item from an array
        var i = this.state.favourites.indexOf(event);
        if(i !== -1) {
            this.state.favourites.splice(i, 1);
        }  
      }
      else{
        this.state.favourites.push(event);   
      }
}

Кнопка / значок: 

 <button  key={item.title} value={item.title} onClick={() => this.updateFavourites(item.title)}>
 <FontAwesomeIcon size="3x" icon="star" />                                
 </button>
0 голосов
/ 15 января 2019

Потому что <FontAwesomeIcon size="3x" icon="star" /> не имеет никакого значения. Имейте в виду, что вы используете event.target.value в методе updateFavourites, значок будет «целью», если вы щелкнете прямо по нему.

...