0
109
Viewshaga clic en el controlador que no cambia de estado
Estoy tratando de crear una aplicación simple donde, si hace clic en un botón, aparece una superposición modal, y si hace clic en la 'x' en el modal, desaparece. Creé un componente para mi botón, llamado ShowOffer, y tengo un clic en él que alterna el valor booleano de modalVisible, que es una parte del estado. Sin embargo, no sucede nada cuando hago clic en él. Hice otro elemento de botón con el mismo clic y parece funcionar bien. Aquí hay una caja de arena de código
3 answers
Answer question0
Esta es la lógica simple. Su componente ShowOffer no identifica el evento onclick y el botón de este componente no tiene ningún controlador de eventos. Entonces simplemente pasa el evento o pasa directamente el nombre de la función para acceder al evento. Pasar el nombre de los accesorios es lo importante.
<ShowOffer display={"block"} onClick = {toggleBox}/> export default function ShowOffer({ display, onClick}) { return ( <button style={{ display: `${display}` }} className="show-offer" onClick={onClick}> Show Offer </button> ); }o
<ShowOffer display={"block"} toggleBoxFunct = {toggleBox}/> export default function ShowOffer({ display, toggleBoxFunct }) { return ( <button style={{ display: `${display}` }} className="show-offer" onClick={toggleBoxFunct}> Show Offer </button> ); }0
Está agregando onClick en el componente ShowOffer , pero aquí solo lo está pasando como prop .
<ShowOffer display={"block"} onClick={toggleVisibility} />es igual que
React.createElement(ShowOffer, { display: "block", onClick: toggleVisibility });Debajo del gancho, solo estás pasando un argumento a una función
Debe agregar el evento onClick en el button en el componente ShowOffer como:
Demo en vivo
<button style={{ display: `${display}` }} onClick={toggleVisibility} className="show-offer" > Show Offer </button> y debe pasar la devolución de llamada toggleVisibility a ShowOffer como:
<ShowOffer display={"block"} toggleVisibility={toggleVisibility} />0
Puede utilizar el concepto de devoluciones de llamada,
App.js, realice los siguientes cambios,
pase toggleVisibility={toggleVisibility} como accesorios, no es necesario mencionar onClick en el componente sino en el botón
return ( <div className="App"> <Modal display={modalVisible ? "flex" : "none"} /> <ShowOffer display={"block"} onClick={toggleVisibility} toggleVisibility={toggleVisibility}/> <button onClick={toggleVisibility}>Button</button> </div> ); ShowOffer.js, función de accesorios pasados, llame a esa función aquí con onclick ,
import React from "react"; import "./ShowOffer.css"; export default function ShowOffer({ display, toggleVisibility }) { return ( <button style={{ display: `${display}` }} onClick={toggleVisibility} className="show-offer"> Show Offer </button> ); }la solución de trabajo está aquí, https://codesandbox.io/embed/modal-overlay-tnis9?fontsize=14&hidenavigation=1&theme=dark