0
214
Vistas¿Cómo levantar el estado del componente secundario?
Estoy buscando alguna orientación en este código de reacción. Tengo un ActionsDropDownWidget con un montón de elementos desplegables que se le pasan como elementos secundarios.
<DropdownMenu testId="actions-menu" trigger={({ triggerRef, ...props }) => ( <Button appearance="subtle" {...props} iconBefore={<VerticalOverflowIcon label="more" />} ref={triggerRef} /> )} > {children} </DropdownMenu>Así es como paso los niños a ActionsDropDownWidget
<ActionsDropDownWidget attachment={attachment} onDeleteAttachment={onDeleteAttachment}> <CustomerDropdownActions attachment={attachment} onAttachmentDownload={onAttachmentDownload} onCopyAttachmentName={onCopyAttachmentName} onDeleteAttachment={onDeleteAttachment} /> </ActionsDropDownWidget>Aquí lo que se representa desde CustomerDropdownActions
<DropdownItemGroup hasSeparator testId="negative-actions"> <DropdownItem onClick={(_) => setOpenDialog(true)} elemBefore={ <TrashIcon label={t("confirmation_modal.negative_action.text")} testId={"trash-button"} /> } description={t("action_dropdown.delete_attachment.description")} > {t("action_dropdown.delete_attachment.text")} </DropdownItem> </DropdownItemGroup> {showConfirmationModal}Ahora, cuando se representa el menú desplegable y también lo son los niños en él.
Cuando hago clic en el niño de arriba, onClick intenta actualizar el estado. Sin embargo, ese estado no se refleja y, por lo tanto, el cuadro de diálogo no se abre.
¿Dónde me estoy equivocando en esto?
1 Respuestas
Responde la pregunta0
Supongo que la perforación de utilería sacó lo mejor de mí.
El primer error fue en
ActionsDropDownWidgetque no era un componente funcional de reacción, por lo que no podía administrar el estado allí.¿Arreglar?
Entonces, lo que hice fue envolver
ActionsDropDownWidgeten un componente funcional contenedor.El segundo error fue que no pasé la devolución de llamada del evento al padre para abrir el cuadro de diálogo.
<DropdownItem onClick={(_) => setOpenDialog(true)} << I should've called the parent callback here.¿Arreglar?
En los componentes secundarios
CustomerActionsyAgentActions, le digo al padre mediante una función de devolución de llamada que muestre el modal. Dado que elActionsDropdDownWidgetprincipal ahora es un componente funcional, administré mi estado allí. Entonces, cuando los componentes secundarios envían un evento a través de la devolución de llamada, actualizo una variable llamadaopenDialogy representa el modal.
Bosquejo
