我缺少 React 按钮 onClick 的密钥 ID答案

【问题标题】：I am missing a key ID for React button onClick我缺少 React 按钮 onClick 的密钥 ID
【发布时间】：2020-03-03 04:30:23
【问题描述】：

当我单击列表项旁边的收藏按钮时，它会将它们全部变为蓝色，而不仅仅是一个“收藏”按钮。我知道我缺少按钮功能的键 ID - 但我无法弄清楚

import React from "react"
import { connect } from "react-redux"
import { Link } from "react-router-dom"

class MyStories extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      button: false
    };
    this.addFavorite = this.addFavorite.bind(this);
  }

  addFavorite = e => {
    this.setState({
      button: true
    });
  };

  render() {
    return this.props.stories.map(t => (
      <div className="menu-inner-container">
        <p key={t.id}>
          <Link to={`/stories/${t.id}`}>{t.attributes.title}</Link>
          <button
            key={t.id}
            className={this.state.button ? "buttonTrue" : "buttonFalse"}
            onClick={this.addFavorite}
          >
            Favorites
          </button>
        </p>
      </div>
    ));
  }
}

//refactor - create a button that will allow for us to mark which our favorites are
const mapStateToProps = state => {
  return {
    stories: state.myStories
  };
};

export default connect(mapStateToProps)(MyStories);

【问题讨论】：

看起来您可能会为每个项目共享一个“最喜欢”状态（即this.state.button）？相反，您可能想要维护一组最喜欢的状态。
@miqh 听起来不错，我将如何在 className 中做到这一点？
嗯，一种方法是使this.state.button 成为object（而不是您所拥有的boolean），其键是唯一的项目标识符，值是最喜欢的状态。然后className 中的谓词变为this.state.button[t.id]。您还需要修改您的 addFavorite 签名，以便指定要为其更新收藏状态的项目（即 addFavorite(id)）。这一切都假设您希望从一开始就保持每个项目的收藏状态。如果应该只有一个收藏夹，则无需维护地图。
这也行，谢谢

标签： reactjs class button onclick key

【解决方案1】：

改变这个 jsx

    <button key={ t.id } 
    className={this.state.button===t.id ? "buttonTrue": "buttonFalse"} 
    onClick={()=> this.addFavorite(t.id)}>Favorites</button>

函数addFavorite

addFavorite = (id) => {
  this.setState({button: id})
}

【讨论】：

@ChristinaW 如果对您有帮助，请接受/投票...祝您编码愉快...

【解决方案2】：

不要对按钮使用布尔值，而是使用被点击按钮的 id。 <button key={ t.id } className={this.state.button === t.id ? "buttonTrue": "buttonFalse"} onClick={ (event) => this.addFavorite(event, t.id) }>Favorites</button>

addFavorite = (e, id) => { this.setState({ button: id }) ` 构造函数（道具）{ 超级（道具）；

this.state = {
  button: ''
}
this.addFavorite = this.addFavorite.bind(this);

}

【讨论】：