无线电输入卡 - React + Antd答案

【问题标题】：Radio Input As Cards - React + Antd无线电输入卡 - React + Antd
【发布时间】：2021-07-10 15:14:54
【问题描述】：

我想创建单选输入按钮样式的卡片。

我正在使用 react js 和 ant design。

尝试使用旧的 input type="radio" 创建我自己的原生组件。

将它们连接到 antd 表单并非一帆风顺，然后我有了另一个想法。

【问题讨论】：

标签： reactjs radio-button antd

【解决方案1】：

使用 antd react Radio 组件，只传递一个卡片组件。这就是工作结果！

Usage.tsx

// Other Code
<Radio.Group onChange={onChange} value={value} className="cards-container">
  <Radio value={FOCUS_LEVEL.Regular} className="radio-input-card-container">
    <InputCard
      title="First Card"
      checked={value === CONSTANT1}
      imgPath="../../assets/icon1.svg"
      points={["This is a point explain why this card is the best!", "Wow this is also a great point"]} />
  </Radio>

  <Radio value={FOCUS_LEVEL.DeepFocus} className="radio-input-card-container">
    <InputCard
      title="Second Card"
      checked={value === CONSTANT2}
      imgPath="../../assets/icon2.svg"
      points={["This point explains why this card is way better", "The other card as shitty points!"]} />
  </Radio>
</Radio.Group>
// Other Code

Usage.scss

.cards-container {
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
}

InputCard.tsx

import React from "react"
import Title from "antd/lib/typography/Title";

import "./InputCard.scss"

export function InputCard({ title, checked, imgPath, points }): JSX.Element {
    return (
        <div className={checked ? "card checked" : "card"}>
            <div className="header-container">
                <Title className="card-title">{title}</Title>
                <img src={imgPath} alt="regular focus"></img>
            </div>
            <ul>
                {points.map((point) =>
                    <li key={point.toString()}>{point}</li>
                )}
            </ul>
        </div >
    );
}

InputCard.scss

.card {
    height: 420px !important;
    width: 360px !important;
    position: relative !important;
    left: -45px; // A work around. Placing the card under the native radio button
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid rgba(2,28,53,0.08);
    border-radius: 14px;
    box-shadow: 7px 7px 15px rgba(2,28,53,0.08);
    cursor: pointer;
    outline: none;

    .header-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    ul {
        padding: 0em 1em 0em 2.5em !important;
    }

    img {
        margin: 0.5em 0em 1em 0em;
    } 
}

.card-title {
    font-size: 20px !important;
    margin-top: 16px !important;
}

.checked {
    transition: border 0.5s ease;
    border: 2px solid rgba(255,0,0,0.6);
}

antd 组件在 card childe 之前创建了一个单选框。将卡片向左移动 (left: -45px) 以便卡片包含无线电圆圈是一种解决方法。我不想在父组件中更改太多以使用此 InputCard 组件，这是我在组件内尝试做的。

【讨论】：