0
164
Viewshaga clic en cualquier lugar de la tarjeta en un botón de opción Antd envuelto dentro de una tarjeta para cambiar el borde y el fondo al seleccionar
Tengo un botón de opción y lo envolví alrededor de una tarjeta para hacerlo más personalizado. Lo que estoy tratando de hacer es poder hacer clic en cualquier lugar y hacer que el botón de opción se pueda seleccionar, así como cambiar el color del borde de la tarjeta y el color de fondo cuando se selecciona Aquí está mi código.
<Card hoverable style={{ borderRadius: '10px', borderColor: 'lightgray'}} bordered> <Meta style={{float: 'left'}} avatar={<Avatar shape="square" src='/resources/images/document.png' />} /> <Radio value="Subscription Docs">Subscription Docs</Radio> </Card>alguna idea sobre el mejor enfoque?
·
Juan Pablo Isaza
1 answers
Answer question0
Verifique el siguiente código usando el estado para cambiar la clase css
Demostración.js
import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Card, Radio, Avatar } from 'antd'; const Demo = () => { const { Meta } = Card; const [cardselected, setCardselected] = useState(false); const onChange = (e) => { console.log(e.target.checked); if (e.target.checked) { setCardselected(true); } else { setCardselected(false); } }; return ( <Card hoverable className={cardselected ? 'card-selected' : 'card-notselected'} bordered > <Meta style={{ float: 'left' }} avatar={<Avatar shape="square" src="/resources/images/document.png" />} /> <Radio value={cardselected} onChange={onChange}> Subscription Docs </Radio> </Card> ); };índice.css
.card-notselected { border-radius: 10px; border-color: lightgray; } .card-selected { border-radius: 10px; background-color: #575ae9; border-color: #2412c7; }Cuando el botón de opción no está seleccionado
Cuando se selecciona el botón de opción
·
Juan Pablo Isaza
Report
Answer question