React FontAwesome Icon 没有为 onClick 传递道具

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

我通过将值作为参数传递给 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>

Answer 2

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