如何使用功能組件在兄弟組件中傳遞 onClick function？

Question

這是我想使用同級組件實現 onClick function 的代碼鏈接。

我有兩個同級組件 SignIn.js 和 SocialSignIn.js，

我該如何實施它們？ 請幫我。

沙盒代碼編輯器鏈接在這里

還有代碼在這里

 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>

Answer 1

你不會觸發你的 onclick，這里是工作版本https://codesandbox.io/embed/busy-tesla-x94ifr?fontsize=14&hidenavigation=1&theme=dark

你的 App.js

import "./styles.css";
import SocialSignIn from "./components/SocialSignIn.js";
export default function App() {
  return (
    <div className="App">
      <SocialSignIn />
    </div>
  );
}

登錄.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;

社交登錄.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;

Answer 2

您似乎正在嘗試使用SignIn組件內部SocialSignIn組件中的handleSocial方法。 這不會像您期望的那樣有效，因為handleSocial的范圍僅限於在SocialSignIn內部使用，而 SocialSignIn 只是一個反應組件。

您可以改為將SocialSignIn用作SignIn組件中的子組件。

所以SignIn組件將有 2 個流程：

• 電子郵件/密碼流
• 社交登錄流程，僅在用戶單擊按鈕時顯示。

您可以這樣設置：

 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>