如何仅显示列表中选定的子项？

Question

我正在尝试在订单支付页面中实现卡列表。 我知道如何在 React.js 中使用 state 来显示/隐藏组件。 但是，对于这个，我只想显示一个选定的父组件的一些子组件。 我很困惑如何以这种方式接近。 任何人都可以对此有想法吗？

您应该从列表中选择要支付的卡

单击卡片后，您将看到其 CVV 和 Zip 代码输入，如下图所示

订单.jsx

class AdditionalOrderDetail extends Component {

  handleSubmitPayment = (e) => {
    e.preventDefault();
    console.log('submitted');
  }

  showCardInfo = (e) => {
    console.log(e.target);
    this.setState(prevState => ({
      showCardInfo: !prevState.showCardInfo,
    }));
  }

<form onSubmit={ this.handleSubmitPayment }>
  {card_list.map((card) => {
     return (
       <div className='card-row'>
         <div>
           <div>
             <input type='radio' name='payment-method' value='as' onClick={ this.showCardInfo } />
             <div>{card.card.card_type}</div>
               <div>ending in</div>
               <div>{card.card.card_number}</div>
             </div>
             <div>
               <div>{card.nick_name}</div>
             </div>
           </div>
           <CardInfo isShown={ showCardInfo } />
         </div>
      );
    })}
  <input type='submit' className='orange full' value='Pay Now' />
</form>

}

const CardInfo = ({ isShown }) => {
  if (isShown) {
    return (
      <div>
        <div>CVV <input type='text' /></div>
        <div>Zip Code <input type='text' /></div>
      </div>
    );
  }
  return null;
};

Answer 1

您需要在state中为每张卡添加一个showCardInfo道具。 正在发生的事情是同一个prop正在managing两个组件：

也许您可以通过修改卡 object 并添加道具showCardInfo或类似的东西来处理 state 来处理这个问题。

假设您的卡 object 是这样的：

const card = {
 card_type: 'Some type',
 card_number: '123123123123123',
 show_more_info: false,
 nick_name: 'My Card',
}

因此，您必须将 jsx 修改为：

      <div className='card-row'>
         <div>
           <div>
             <input type='radio' name='payment-method' value='as' onClick={ this.showCardInfo } />
             <div>{card.card.card_type}</div>
               <div>ending in</div>
               <div>{card.card.card_number}</div>
             </div>
             <div>
               <div>{card.nick_name}</div>
             </div>
           </div>
           <CardInfo isShown={ card.show_more_info } />
         </div>

并且必须修改方法以通过点击访问卡片，也许传递卡片的 id 以便更容易处理选定的卡片：

onClick={ () => {this.showCardInfo(e, card.id) }}