Tengo una página principal, con un componente de botón que creo para reutilizar en mi proyecto. Mi problema es cuando agrego el evento onClick a mi componente externo, el evento de clic no funciona, pero si creo el mismo botón dentro de mi página principal, el evento de clic funciona bien
Componente de botón
import React from "react"; import styled from "styled-components"; const BigButton = (props): JSX.Element => { return <>{props.red ? <BigBtn red={props.red}>{props.val}</BigBtn> : <BigBtn>{props.val}</BigBtn>}</>; }; export default BigButton; const BigBtn = styled.button` font-style: normal; font-weight: 500; font-size: 12px; line-height: 15px; color: #f5f5f5; width: 78px; height: 30px; background: ${(props) => (props.red ? "#BD2129" : "#2e3034")}; border: ${(props) => (props.red ? "initial" : "1px solid #494b4f")}; border-radius: 2px; display: flex; align-items: center; justify-content: center; `;Esto funciona en la página principal.
<button onClick={buttonClose}>Close</button>Componente de botón en la página principal: esto no funciona en la página principal
<BigButton val="Cancel" onClick={handleClose} />Cerrar función
const handleClose = (e) => { e.preventDefault(); props.onClose(); };Su componente no parece correcto. No tiene un button dentro del componente y el evento onClick . Deberías actualizar así
import React from "react"; import styled from "styled-components"; const BigButton = (props): JSX.Element => { const handleClick = () => { props.onClick() } return <>{props.red ? <BigBtn red={props.red}> <button onClick={handleClick}> {props.val} </button> </BigBtn> : <BigBtn> <button onClick={handleClick}> {props.val} </button> </BigBtn>} </> }; export default BigButton; const BigBtn = styled.button` font-style: normal; font-weight: 500; font-size: 12px; line-height: 15px; color: #f5f5f5; width: 78px; height: 30px; background: ${(props) => (props.red ? "#BD2129" : "#2e3034")}; border: ${(props) => (props.red ? "initial" : "1px solid #494b4f")}; border-radius: 2px; display: flex; align-items: center; justify-content: center; `;¿Está agregando el detector de eventos onClick a su botón de estilo <BigBtn> ?
Su componente BigButton está recibiendo un accesorio llamado onClick , por lo que debe agregarlo como una función que se activa en un evento de clic en su botón con estilo.