如何使用功能组件在兄弟组件中传递 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>