ReactJS：需要使用 onClick 函数更改卡片样式答案

【问题标题】：ReactJS: Need to change card styling using onClick functionReactJS：需要使用 onClick 函数更改卡片样式
【发布时间】：2019-07-27 06:58:10
【问题描述】：

我知道这将需要稍后进行重构以将事物分离到它们自己的组件中，但我目前正面临时间紧缩，需要按原样进行连接。我使用 array.map() 从我用于测试目的的 JSON 对象创建卡片元素。我正在尝试在卡 <div> 上使用 onClick 函数将一些可识别信息（例如“offerid”）保存到组件状态中，然后检查状态中的 id 是否与当前卡匹配。如果匹配，我想在 div 上添加 cardActive 作为 className，这样只有特定的卡片会改变颜色。我不知道该怎么做。就像现在一样，无论选择哪张卡片，所有卡片样式都会更新。下面列出了我的 React 组件和相应的 CSS。任何帮助将不胜感激

反应

import React, { Component } from 'react';
import Grid from '@material-ui/core/Grid';
import './Button.css';

class UsersList extends Component {
    constructor(){
        super();

        this.state = {
            cardActive: false,

            customers:
            [
                {
                    "CustomerId": "1",
                    "LastName": "Doe",
                    "FirstName": "Jane",
                    "Address": {
                      "Address1": "1811 Chestnut Street",
                      "Address2": null,
                      "City": "Philadelphia",
                      "State": "Pennsylvania",
                      "Zip": "19103"
                    },
                    "Offers": [
                      {
                        "OfferId": "Offer1",
                        "Name": "Offer 1",
                        "Products": [
                          {
                            "ProductId": 1,
                            "ProductName": "Stuff"
                          },
                          {
                            "ProductId": 2,
                            "ProductName": "More stuff"
                          }
                        ],
                        "Price": "$1"
                      },
                      {
                        "OfferId": "Offer2",
                        "Name": "Offer 2",
                        "Price": "$2",
                        "Products": [
                          {
                            "ProductId": 3,
                            "ProductName": "A lot of stuff"
                          },
                          {
                            "ProductId": 4,
                            "ProductName": "And then there was stuff"
                          }
                        ]
                      },
                      {
                        "OfferId": "Offer3",
                        "Name": "Offer 3",
                        "Price": "$3",
                        "Products": [
                          {
                            "ProductId": 5,
                            "ProductName": "Good grief would you look at all this stuff"
                          },
                          {
                            "ProductId": 5,
                            "ProductName": "What a great deal for stuff"
                          }
                        ]
                      }
                    ]
                  }
              ]
        }
    }

    selectCard(){
        this.setState({ cardActive: !this.state.cardActive })
    }


    render (){
        let card_class = this.state.cardActive ? "cardActive" : "card";
        return (
            <div>
                {this.state.customers.map((customer, index) => {
                    return  <div key={index + customer.CustomerId}>
                                <h2>Customer</h2>
                                <hr></hr>
                                    <h3 >Name: {customer.LastName}, {customer.FirstName}</h3>
                                    <h3 >Customer ID: {customer.CustomerId}</h3>
                                    <h3 >
                                    Address: 
                                    <br></br>
                                    {customer.Address.Address1}
                                    <br></br>
                                    {customer.Address.City}, {customer.Address.State} {customer.Address.Zip} 
                                    </h3>
                                    <br></br>
                                    <h2>Available Offers</h2>
                                    <Grid container spacing={24} justify="center"> 
                                    {customer.Offers.map((Offer,index) => {
                                        return <div key={index + Offer.OfferId} onClick={this.selectCard.bind(this)}>
                                                <Grid item xs={12}>
                                                <div className="card" class={card_class}>
                                                    <div className="container">
                                                        <h5><b>{Offer.OfferId}</b></h5> 
                                                        <h2>{Offer.Name}</h2>
                                                        {Offer.Products.map((Product, index) => {
                                                            return <div key={index + Product.ProductId}>
                                                                    <p>+ {Product.ProductName}</p>
                                                                  </div>

                                                        })}
                                                        <h3>{Offer.Price}</h3> 
                                                    </div>
                                                </div>
                                                </Grid>
                                            </div>
                                    })}

                                    </Grid>

                            </div>

                })}
                <button className="navbuttonSelected">Submit</button>
            </div>
        )
    }
}

export default UsersList

CSS

  .card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px; /* 5px rounded corners */
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 5%;
    cursor: pointer;
  }

  .cardActive {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.01s;
    border-radius: 5px; /* 5px rounded corners */
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 5%;
    background: #0c72c5 !important;
    color: white !important;
    cursor: pointer;
  }

  .cardActive:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }

  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }

【问题讨论】：

如果你根据 state 中的前一个值设置 state，你应该把它作为一个函数调用：this.setState((state) => ({ cardActive: !state.cardActive })); 这样你就不会被 state 设置的顺序搞砸了

标签： javascript css reactjs onclick

【解决方案1】：

我可以建议两种方法来解决您的问题。

方法一：

在您的 selectCard 方法中，除了 cardActive 之外，将卡片的 Id 存储到状态中。
在您的渲染方法中，在 map 函数中，考虑 Id（保存在 state 中）也可以应用您的 cardActive 类。
使用这种方法，您将无法一次选择多张卡片。只有一张卡将具有 cardActive 类，而其他卡则不会。
另外，您需要确保将 Id 设置为仅在选择卡片时声明。不是当它被选中时。

方法2：

在您的客户优惠对象中，除了拥有所有现有字段外，添加一个属性 isActive 并在您的地图方法中使用它来设置 cardActive 类或普通类。
Whenever a card is selected, update isActive property of the selected card (you can pass the offerObject to selectCard method and update isActive property in it or you can pass a unique identifier and use your customers object and update isActive property of selected object .
使用这种方法，您可以选择多张卡片，因为您在每个客户级别维护 isActive 而不是一个 cardActive 变量。

【讨论】：

方法 1 听起来像是要走的路，但在代码中会怎样？我更新了我的构造函数以包含 this.state = { clickedId: -1, } 将我的 selectCard 函数更改为：selectCard(event){ const id = event.target.offerid this.setState({ cardActive: !this.state.cardActive, clickedId: id }) console.log(this.state.clickedId); } 并将 onClick 更改为 onClick={this.selectCard} 但现在当我单击所有我在控制台中得到的内容是 -1 然后每当我点击
为什么不发送offer ID和选择的customer ID，而不是只发送事件？您可以使用选定的 offerid 和客户 ID（如果需要）来识别选择了哪个优惠并将样式应用于该卡
这实际上是我的下一个问题，我该怎么做？我的最终目标是将 offerId 和 Customer ID 都传递给当用户点击提交时发送 POST 操作的函数
您一次只能激活一张卡吗？如果是这种情况，您可以在状态下维护 customerId 和 offer id，并在用户单击提交时将其发送到 POST 操作。如果不是，我建议使用第二种方法，您可以使用客户/优惠对象中的 isActive 属性选择所有活动卡，并将这些 ID 发送到您的 POST 方法
是的，一次只能选择一张卡片！我需要在该 POST 操作中将初始 JSON 响应（SessionID、CustomerID、Offer {OfferID、OfferName}）中的以下唯一值传递回。我会更新我的状态，然后看起来像：this.state = { cardActive: "", customerID: " ", Offer: " ", OfferID: " ", OfferName: " ", customers: [...] }，然后将它们绑定到一个函数中的状态，如：submitSelection(offerId, offerName, CustomerId, SessionId, ){ this.setState({ offerId: , offerName, CustomerId, SessionId}); }

【解决方案2】：

设置所选卡片的id：

selectCard(offerId) {   
  this.setState({ cardActive: offerId });
}

更改onClick 的调用方式并在Offer.OfferId === this.state.cardActive 时应用特定的类

return (  
 <div
   key={index + Offer.OfferId}
   onClick={() => this.selectCard(Offer.OfferId)}
 >
   <Grid item xs={12}>
     <div
      className={Offer.OfferId === this.state.cardActive ? "cardActive" : "card"}>

工作示例：https://codesandbox.io/s/mjryv01528

【讨论】：

这是 IMO 的最佳方法。

【解决方案3】：

...
constructor(){
    super();

    this.state = {
        cardActive: "",

        customers: [...]
    }
    this.selectCard = this.selectCard.bind(this);
    this.getCardClass = this.getCardClass.bind(this);
}

selectCard(offerId){
    this.setState({ cardActive: offerId })
}

getCardClass(offerId) {
    const { cardActive } = this.state;
    return offerId === cardActive ? 'cardActive' : 'card';
}

render() {
...
    customer.Offers.map((Offer,index) => {
        return <div key={index + Offer.OfferId} onClick={() => this.selectCard(Offer.OfferId)}>
            <div item xs={12}>
            <div className="card" class={this.getCardClass(Offer.OfferId)}>
                <div className="container">
                    <h5><b>{Offer.OfferId}</b></h5> 
                    <h2>{Offer.Name}</h2>
                    {Offer.Products.map((Product, index) => {
                        return <div key={index + Product.ProductId}>
                                <p>+ {Product.ProductName}</p>
                              </div>

                    })}
                    <h3>{Offer.Price}</h3> 
                </div>
            </div>
            </div>
        </div>
    })
...

}

这里选择的卡片存储在状态中，而不仅仅是true 或false。 selectCard 辅助方法设置cardActive 的值，而getCardClass 确定所选卡片的类别。

【讨论】：