React js : 다른 구성 요소의 상태 액세스

Question

다음 코드를 사용하여 구성 요소를 작성했습니다. 목표는 카드에 버튼을 클릭했을 때 그것을 강조 표시하기 위해 카드에 수업을 추가하는 것입니다. 그러나 아래 코드는 첫 번째 클릭에서 작동하지만 후속 클릭에서는 작동하지 않습니다. 클래스를 제거 할 때 다른 요소의 클릭 상태를 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; 

Answer 1

상위 구성 요소에 로직을 추가하는 것이 더 쉬울까요? 이후 모든 자식 카드 구성 요소를 "인식"합니다.

는

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} /> 

겠습니까이 일을?

Answer 2

가장 좋은 방법은 다음과 같이 lift the state up.를 해제하는 것입니다 :

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를 사용하는 것이 좋을 것이다하지만

.