javascript - React FontAwesome Icon 未传递 onClick 的 props

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 时，我无法从对象获取 props。

看起来当我点击图标时我触发了我的 react 按钮并且 Prop 正在正常传递。如果我直接点击图标，则会触发 onClick 但不会传递 props。

<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 函数来解决我的问题，而不是尝试通过 props 从对象获取值。

更改如下。

更新收藏夹功能:

 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>