Tengo una tabla en la que cada fila tiene un botón que enviaría una solicitud DELETE para eliminar los datos de esa fila de la base de datos:
{ title: '', render: (record) => { return ( <Button icon={<DeleteOutlined />} style={{color:'#1890ff', border:'solid 0px'}} onClick={() => showModal(record)} > </Button> ) } }, Aquí estoy tratando de pasar los datos de record al hacer clic en el botón a un modal. Para hacer eso, creé un useState que almacenaría los datos de la fila de mi tabla y luego quise pasar los datos a un modal:
const [modalTaskId, setModalTaskId] = useState(); const [visible, setVisible] = useState(false); const showModal = (record) => { setModalTaskId(record); setVisible(true); };Este es mi modal:
<Modal visible={visible} onOk={() =>{handleOk()}} confirmLoading={confirmLoading} onCancel={handleCancel} > <p>{modalText}</p> </Modal> Y digamos que quiero registrar el modalTaskId al hacer clic en Aceptar en modal:
const handleOk = async () => { console.log('modalTaskId: ', modalTaskId) }¡Pero se registra vacío para mí! Entonces, ¿cómo puedo pasar datos de la fila de mi tabla a mi modal y luego usar esos datos al hacer clic en el botón Aceptar de modal?
Esencialmente, según el alcance de su objeto de columns , puede envolverlas como un valor de retorno en una función que captura el contexto de su controlador showModal .
const getColumns(showModal) { return [{ title: "Buttons", dataIndex: 'arbitrary', render: (text, record) => <Button onClick={showModal}>Open Modal</Button> }, ...] } ... // Usage <Table dataSource={dataSource} columns={getColumns(showModal)} />Tenga en cuenta que esta puede no ser la solución más eficaz.
Al principio, establezca el valor inicial para su modalTaskId .
const [modalTaskId, setModalTaskId] = useState(); Luego, elimine onOk , puede controlar su visibilidad mediante useEffect :
useEffect(() => { if (visible) console.log(modalTaskId); }, [visible])