Tratando de entender esta idea, creo que puede ir en contra de las reglas de diseño de React, pero aún no puedo encontrar la manera de hacerlo mejor.
Tengo una aplicación con bastantes formularios modales que pueden aparecer, y estoy tratando de asegurarme de que todos sean consistentes en el aspecto de la interfaz de usuario. Como resultado, hice un componente "GenericModal", que puede tomar title/formComponent o body/buttons. Esto funciona bien y lo consiguió para llenar el componente.
El problema es que no puedo entender cómo hago que mis botones interactúen con formComponent. Intenté pasar los árbitros, pero por alguna razón, no pude hacer que funcionara a las 2 am, me di por vencido y me fui a la cama.
¿Alguien puede sugerir algo que me esté perdiendo? He considerado que estoy tratando de hacer que el componente del formulario haga demasiado (es decir, debería pasar una instancia de formik al formulario, para poder interactuar con él desde el componente que aloja el ).
function GenericModal(props) { return ( props.show && ( <Modal show={props.show} onHide={props.handleClose} backdrop="static" keyboard={false} > <Modal.Header closeButton={props.closeButton && props.closeButton}> <Modal.Title>{props.title ? props.title : "Modal"}</Modal.Title> </Modal.Header> <Modal.Body> {props.formComponent ? props.formComponent : props.body && props.body} </Modal.Body> {props.buttons && ( <Modal.Footer> {props.buttons && props.buttons.map((button) => ( <Button variant={button.style} key={button.key} onClick={() => handleButtonClick(button.key)} > {button.text} </Button> ))} </Modal.Footer> )} </Modal> ) ); } export default GenericModal;Los botones llamarán a handleButtonClick, que para "enviar" o "restablecer" originalmente estaba pensando en activar funciones en formComponent.
Este componente se utiliza entonces de la siguiente manera:
{showNewModal && ( <GenericModal show={showNewModal} handleClose={closeNewModal} title="New Asset" formComponent={<AssetForm asset={new Asset()} />} closeButton={true} buttons={ { text: "Create", style: "primary", key: "submit" } } /> )}No estoy seguro de haber entendido completamente el problema, pero parece que desea asegurarse de tener control sobre lo que sucede cuando se hace clic en el GenericModal .
¿Puede simplemente pasar el controlador onClick como accesorio en lugar de la key ?
Entonces, dentro de su GenericModal , usaría el botón como este:
<Button onClick={props.button.onClick} />De esta manera, su botón modal puede llamar a una devolución de llamada en el componente principal y puede manejarlo de la forma que desee.
Resolví esto pasando un objeto al formulario de activos de GenericModal, y haciendo que completara las funciones de envío/restablecimiento en ese objeto, para poder llamarlo desde el componente principal al presionar el botón (para que Formik pueda validar los datos, luego pasar volver al modal).
Una forma un poco rara de hacerlo, probablemente de la manera incorrecta, ¡pero funciona!