Javascript React js：访问其他组件的状态

我有一个使用以下代码构建的组件。其目的是在卡片上添加一个类，以便在单击卡片中的按钮时将其高亮显示。但是，下面的代码在第一次单击时起作用，但在随后的单击中不起作用。 我明白，当我删除该类时，我必须将其他元素的单击状态设置为false。如何做到这一点

import React, { Component } from 'react';
import './PricingCard.css';

class PricingCard extends Component {

  constructor(){
    super();
    this.state = {
      clicked : false
    }
  }

  makeSelection(){

    let elems = document.getElementsByClassName('Card');
    for(var i=0;i<elems.length;i++){
      elems[i].classList.remove("active");
    }
    this.setState({clicked: true});

  }




  render() {

    var activeClass = this.state.clicked ? 'active' : '';

    return (
      <div className= {"categoryItem Card " + this.props.planName + " " +activeClass}>
        <div className="cardDetails">
          <div> {this.props.planName} </div>
          <div className="pricing"> {this.props.price} </div>
          <button onClick={this.makeSelection.bind(this)} className="buttonPrimary"> Select this plan </button>
          <div className="subtitle"> {this.props.footerText} </div>
        </div>
      </div>
    );
  }
}

export default PricingCard;

最好的方法是这样举：

class PricingCardContainer extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      selectedCard: NaN,
    }
  }

  handleCardClick(selectedCard){ this.setState({ selectedCard }); }

  render() {
    return (
      <div>{
        this.props.dataArray.map((data, i) => 
          <PricingCard
            key={i} 
            className={this.state.selectedCard === i ? 'active': ''}
            price={data.price}
            onClick={() => this.handleCardClick(i)}
            footerText={data.footerText}
            planName={data.planName}
            plan={data.plan}
          />
        )
      }</div>
    )
  }
}


const PricingCard = ({ className = '', planName, price, onClick, footerText }) => (
  <div className= {`categoryItem Card ${planName} ${className}`}>
    <div className="cardDetails">
      <div> {planName} </div>
      <div className="pricing"> {price} </div>
      <button onClick={onClick} className="buttonPrimary"> Select this plan </button>
      <div className="subtitle"> {footerText} </div>
    </div>
  </div>
);

export default PricingCard;

---

虽然使用一些数据id比使用索引值更好。

在父组件中使用逻辑不是更容易吗？因为它知道所有子卡组件

有点像

this.state = { selectedComponent: null };

onClick(card_id) {
   this.setState({ selectedComponent: card_id });
}

…在渲染中：

const cards = smth.map((card) => 
    <Card onClick={this.onClick.bind(this, card.id)} 
        isActive={map.id === this.state.selectedComponent} />

---

这行得通吗？

目的是在卡片上添加一个类，以便在单击其中的按钮时将其高亮显示。但是，下面的代码在第一次单击时起作用，但在随后的单击中不起作用。下次单击时希望发生什么？切换类？@Tomasz如果我单击一个元素，一个类将添加到该元素中，而同一个类将从所有其他类似元素中删除。普通的元素选择界面。这里的一个小问题是，我不能像这样直接将click函数绑定到组件上。因为单击必须绑定到组件内部的按钮。有什么解决办法吗？也许可以将函数传递给卡组件，并将其绑定到一个按钮内。。。。点击