Aquí está el enlace del código que quiero implementar la función onClick usando componentes hermanos.
Tengo dos componentes hermanos SignIn.js y SocialSignIn.js,
¿Cómo podría implementarlos? Por favor, ayúdame.
Enlace del editor de código Sandbox aquí
Y también el código está aquí.
import { React } from "react"; // for Custom Email and Password Sign Up const SignIn =({handleSocial})=>{ return ( <> <h2> this is sign in usiging custom email & password</h2> {/* html form goes here */} <button onClick={handleSocial}>social sign in</button> </> ) } export default SignIn; import { React } from "react"; //for social auth sign up const SocialSignIn =()=>{ const handleSocial = ()=>{ console.log("hello social sign in") } return ( <> <h2> this is social sign in</h2> </> ) } export default SocialSignIn; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>No activa su onclick, aquí la versión de trabajo https://codesandbox.io/embed/busy-tesla-x94ifr?fontsize=14&hidenavigation=1&theme=dark
Tu aplicación.js
import "./styles.css"; import SocialSignIn from "./components/SocialSignIn.js"; export default function App() { return ( <div className="App"> <SocialSignIn /> </div> ); }Inicio de sesión.js
import { React } from "react"; const SignIn = ({ handleSocial }) => { const handleClick = () => { handleSocial(); }; return ( <> <h2> this is sign in usiging custom email & password</h2> <button onClick={handleClick}>social sign in</button> </> ); }; export default SignIn;SocialSignIn.js
import { React } from "react"; import SignIn from "./SignIn"; const SocialSignIn = () => { const handleSocial = () => { console.log("hello social sign in"); }; return ( <> <h2> This is social sign in</h2> <SignIn handleSocial={handleSocial} /> </> ); }; export default SocialSignIn;Parece que está intentando usar el método handleSocial del componente SocialSignIn dentro del componente SignIn . Esto no funcionará de la forma esperada, ya que handleSocial está diseñado únicamente para su uso dentro de SocialSignIn y SocialSignIn es solo un componente de reacción.
Lo que podría estar haciendo en su lugar es usar SocialSignIn como un componente secundario dentro del componente SignIn .
Entonces, el componente SignIn tendrá 2 flujos:
Puedes configurar esto como tal:
import { React } from "react"; // for Custom Email and Password Sign Up const SignIn =()=>{ const [showSocialLogin, setShowSocialLogin] = React.useState(false); return ( <> {!showSocialLogin && <div> <h2> this is sign in usiging custom email & password</h2> {/* html form goes here */} <button onClick={() => setShowSocialLogin(true)}>Click here for social login</button> </div> } {showSocialLogin && <SocialSignIn onCancel={() => setShowSocialLogin(false)} />} </> ) } export default SignIn; import { React } from "react"; //for social auth sign up const SocialSignIn =({onCancel})=>{ return ( <> <h2> this is social sign in</h2> <button onClick={props.onCancel}>Go back to email/password</button> </> ) } export default SocialSignIn; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>