Einzelauswahl von Karten in React
Ich bin ein Anfänger bei React und versuche, eine Einzelauswahl auf meinen Karten zu implementieren, bei der nur eine Karte gleichzeitig ausgewählt werden kann und die ausgewählte Karte hervorgehoben wird. Das ist meine borderCard-Komponente
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"}
`;
Diese BorderCard wird dann in meiner PaymentCard-Komponente verwendet
const PaymentCard = ({ option }) => {
return (
<BorderCard style={{ marginTop: "10px"}} selected >
<Row>
<StatusHead style={{ fontWeight: 500 }}>{option.optionText}</StatusHead>
<StatusHead>₹ {formatAmount(option.totalPayable)}</StatusHead>
</Row>
</BorderCard>
);
};
Und schließlich werden all diese Zahlungskarten nacheinander anhand von Karten dargestellt.
return (
<ScrollableBox>
{paymentOptions.map((option, index) => (
<PaymentCard key={index} option ={option} onChange = {() => setisSelected(index)}
/>
))}
</ScrollableBox>
<Row style={{ marginTop: "15px", alignItems: "flex-start" }}>
<BsExclamationCircle
style={{
fontSize: "20px",
paddingTop: "2px",
margin: "0 8px",
}}
/>
<SubText>
{paymentOptions.length > 0
? paymentOptions[0].lateChargeText
: ""}
</SubText>
</Row>
};
Ich habe prop selected in der BorderCard-Komponente aufgerufen und bei der Übergabe in der PaymentCard-Komponente werden alle Karten statt einer ausgewählt. Zweitens habe ich in der endgültigen Rückgabeanweisung PaymentOptions[0] hart codiert, wo es auf dem aktuell ausgewählten Array-Element (dh Karte) basieren sollte. Aus diesem Grund kann ich die findIndex () -Methode verwenden, um den Index der derzeit ausgewählten Karte abzurufen, aber ich kann keine Funktion für handleSelection schreiben und die ausgewählte Requisite in meiner BorderCard-Komponente entsprechend verwenden. Soll ich stattdessen einen Staat verwenden, um die ausgewählte Karte zu speichern? Bitte helfen Sie mir, dies zu verstehen.
const handleSelection = ;
const selectedIndex = paymentOptions.findIndex(handleSelection);
Sie müssen selectedund onChangeals Eigenschaften übergeben in PaymentCard:
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>
);
};
Dann nach isSelectedWert als ausgewählt markieren :
const [isSelected, setisSelected] = useState(null);
//...
{paymentOptions.map((option, index) => (
<PaymentCard key={index} option ={option} selected={isSelected === index} onChange = {() => setisSelected(index)}/>
))}
Sie können die ausgewählte Option mit dem isSelected-Wert abrufen:
<SubText>
{paymentOptions.length > 0 && isSelected
? paymentOptions[isSelected].lateChargeText
: ""}
</SubText>