React js：訪問其他組件的狀態

我使用下面的代碼構建了一個組件。我們的目標是在卡片上添加一個班級，當點擊其中的按鈕時突出顯示它。但是，下面的代碼適用於第一次點擊，但不適用於後續點擊。我知道我必須在刪除類時將其他元素的單擊狀態設置爲false。如何才能做到這一點？React js：訪問其他組件的狀態

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;

來源

2017-09-03 Sooraj Chandran

「我們的目標是在卡片上添加一個班級，以便在點擊該卡片時點擊該班級。但是，下面的代碼適用於第一次點擊，但不適用於後續點擊」。您希望在下次點擊時發生什麼？切換課程？ – Tomasz

@Tomasz如果我點擊一個元素，一個類將被添加到該元素中，並且同一個類將從所有其他類似元素中移除。正常元素選擇UI。 –

在父組件中擁有邏輯不會更容易嗎？由於它「知道」所有兒童卡組件。

有類似...

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

將這項工作？

來源

2017-09-03 09:40:52

這裏的一個小問題是，我不能直接將點擊功能綁定到像這樣的組件。由於點擊必須綁定到組件內的按鈕。任何解決方法？ –

也許將函數傳遞給卡組件，並將其綁定到一個按鈕.... –

最好的辦法將是解除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索引值。

來源

2017-09-03 09:38:42 Tomasz

React js：訪問其他組件的狀態

回答

相關問題