Question

我有一个React Web应用程序，并且已经安装并导入了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);   
      }
}

我在做什么错？我已经阅读了所有与该问题相关的帖子。

感谢您的帮助

Answer 1

因为<FontAwesomeIcon size="3x" icon="star" />没有任何值。请记住，您正在updateFavourites方法中使用event.target.value，当您直接单击该图标时，该图标将成为“目标”。

Answer 2

我通过将updateFavourites函数的值作为参数传递来解决问题，而不是尝试通过props从对象中获取值。

更改如下。

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>

React FontAwesome Icon不传递onClick的道具

2 个答案: