Question

我知道稍后将需要重构以将其分解为各自的组件，但是目前我正面临时间紧迫的问题，需要按原样进行连接。我使用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);
  }

Answer 1

设置所选卡的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

Answer 2

我可以提出两种解决问题的方法。

方法1：

在selectCard方法中，除了cardActive之外，还将card的ID存储到状态中。
在您的render方法中，在map函数中，还要考虑id（保存为state）来应用cardActive类。
使用这种方法，您将无法一次选择多个卡。只有一张卡具有cardActive类，而其他则没有。
此外，您需要确保将ID设置为仅在选择卡时才声明。当它退出时不会。

方法2：

在客户的offers对象中，除了具有所有现有字段外，还添加一个属性isActive，并在您的map方法中使用它来设置cardActive类或普通类。
无论何时选择卡，都将更新所选卡的isActive属性（可以将offerObject传递给selectCard方法并更新其中的isActive属性，也可以传递唯一标识符并使用客户对象并更新所选对象的isActive属性。
通过这种方法，您可以在维护每个客户级别的isActive时选择多个卡，而不是一个cardActive变量。

Answer 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确定所选卡的类别。

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

3 个答案: