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;

“我们的目标是在卡片上添加一个班级，以便在点击该卡片时点击该班级。但是，下面的代码适用于第一次点击，但不适用于后续点击”。您希望在下次点击时发生什么？切换课程？ – 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} />

将这项工作？

这里的一个小问题是，我不能直接将点击功能绑定到像这样的组件。由于点击必须绑定到组件内的按钮。任何解决方法？ –

也许将函数传递给卡组件，并将其绑定到一个按钮.... –

答

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

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

相关推荐