Javascript React中的单卡选择

我是React的初学者，我尝试在我的卡上实现单一选择，一次只能选择一张卡，并且选中的卡会高亮显示。 这是我的borderCard组件

export const BorderCard = styled.div`
  width: 100%;
  box-sizing: border-box;
  background: ${(props) =>
    props.selected ? "#E8F1FF" : "#FFFFFF"};
  border: ${(props) =>
      props.selected ? "1.5px solid #2375A4" : "1px solid #d5dde3"}
`;

const PaymentCard = ({ option }) => {
  
  return (
    <BorderCard style={{ marginTop: "10px"}} selected  >
      
      <Row>
        <StatusHead style={{ fontWeight: 500 }}>{option.optionText}</StatusHead>
        <StatusHead>₹ {formatAmount(option.totalPayable)}</StatusHead>
      </Row>
   </BorderCard>
  );
};

然后在我的PaymentCard组件中使用此BorderCard

export const BorderCard = styled.div`
  width: 100%;
  box-sizing: border-box;
  background: ${(props) =>
    props.selected ? "#E8F1FF" : "#FFFFFF"};
  border: ${(props) =>
      props.selected ? "1.5px solid #2375A4" : "1px solid #d5dde3"}
`;

const PaymentCard = ({ option }) => {
  
  return (
    <BorderCard style={{ marginTop: "10px"}} selected  >
      
      <Row>
        <StatusHead style={{ fontWeight: 500 }}>{option.optionText}</StatusHead>
        <StatusHead>₹ {formatAmount(option.totalPayable)}</StatusHead>
      </Row>
   </BorderCard>
  );
};

---

您需要将

选中的
和
onChange
作为
支付卡中的属性传递：

const PaymentCard = ({ option, selected, onChange }) => {
  
  return (
    <BorderCard style={{ marginTop: "10px"}} selected={selected}  >
      
      <Row onClick={onChange}>
        <StatusHead style={{ fontWeight: 500 }}>{option.optionText}</StatusHead>
        <StatusHead>₹ {formatAmount(option.totalPayable)}</StatusHead>
      </Row>
   </BorderCard>
  );
};

您可以使用isSelected值获取所选选项：

<SubText>
   {paymentOptions.length > 0 && isSelected
       ? paymentOptions[isSelected].lateChargeText
       : ""}
</SubText>


{paymentOptions.length>0&&isSelected
？paymentOptions[isSelected].lateChargeText
: ""}

我会将当前选定的borad提升到公共组件。在挂载的边界卡上，我会给它分配一些uuid。当它被选中时，它会向上发送当前选中的卡id（例如onSelect）。当前选定的卡将更改所有子BorderCard后，将检查当前选定的id是否为其自己的id。将选定的板提升到公共组件意味着什么？我正在使用功能组件，因此我对如何提升状态有点困惑选定的道具已在BorderCard中传递，因此我获得所有选定的卡，BorderCard和PaymentCard是两个独立的组件。如何在PaymentCard组件中再次传递所选的道具它们是两个独立的组件，但是PaymentCard呈现BorderCard，并且它也需要所选的属性。此外，您需要传递onChange回调，这样当单击card时，onChange函数被分派是，我更新了我的答案，您需要传递onChange tooYes，没错！onClick事件可能在BorderCard中
<SubText>
   {paymentOptions.length > 0 && isSelected
       ? paymentOptions[isSelected].lateChargeText
       : ""}
</SubText>