0
210
ViewsAlternar un control giratorio al hacer clic en el botón dentro de una fila de la tabla antd
Tengo una tabla como esta con una columna que contiene un botón como este:
const columns = [ ... { title: "button", dataIndex: "key", render: (text, record) => { return ( <Button icon={<DeleteOutlined />} onClick={() => pendingToggle()} ></Button> ); } } ]; Cuando hace clic en este botón, debe cambiar el botón con <Spin /> del diseño de hormiga solo en esa fila en la que se hace clic. He escrito un fragmento de código pero no funciona, ¡puedes encontrarloaquí !
¿Cómo puedo hacerlo?
·
Juan Pablo Isaza
1 answers
Answer question0
Debe usar los estados React para que el DOM se vuelva a renderizar. Para hacerlo, necesita un componente de reacción, algo como:
function ButtonCell() { const [pending, setPending] = useState(false); return pending ? ( <Spin /> ) : ( <Button icon={<DeleteOutlined />} onClick={() => setPending(true)}> Delete </Button> ); }En su tabla puede escribir:
{ title: "button", dataIndex: "key", render: () => { return <ButtonCell />; } // or just `render: ButtonCell` }Ejemplo de trabajo:
·
Juan Pablo Isaza
Report
Answer question