在React中从子功能组件更改父组件状态

Question

我创建了一个包含登录组件和注册组件的签名页面组件。我的问题是，我如何传递一个onhtml函数从父到子，以便更改我的父组件（签名页组件）的状态？我期望的是，通过单击子组件中的按钮，可以切换父组件的活动状态，并根据活动状态更改样式。我试图通过一个处理功能从父到子，但它不能很好地工作。

有什么解决办法吗？

codesandbox中的详细信息：https://codesandbox.io/s/wizardly-sanne-rf0u2?file=/src/components/SignIn/SignIn.js

在我的父组件（SignPage）中，

function SignPage() {
  const [active, setActive] = useState(false);
  const handleClick = () => {
    setActive(!active);
  };

return (
    <div className="sign-container">
      <div
        className={active ? "sign-wrapper s-signup" : "sign-wrapper"}
      >
        <SignIn handleClick={handleClick} />
        <SignUp handleClick={handleClick} />
      </div>
    </div>
  );
}

在我的子组件中（登录/注册）

import React, { useState } from "react";
import "./SignIn.css";

function SignIn(handleClick) {
  return (
    <div className="sign-in-container">
      <form className="sign-form sign-in">
        <h2>Sign In</h2>
        <label htmlFor="email">
          <span>Email Address</span>
          <input type="email" name="email" />
        </label>
        <label htmlFor="password">
          <span>Password</span>
          <input type="password" name="password" />
        </label>
        <button className="submit" type="submit">
          Sign In
        </button>

        <p className="panel-switcher" onClick={handleClick()}>
          Don't have an account?
        </p>
      </form>
    </div>
  );
}

export default SignIn;

Answer 1

首先，组件的props是对象类型。

所以，如果你想让句柄在子句中点击，它应该像下面这样。

function SignIn({ handleClick }) {
  // ...
}

第二，将函数传递给子函数时，不应调用它。

比如像下面这样。

<p className="panel-switcher" onClick={handleClick}>

Answer 2

就快到了，道具在第一个参数中作为对象传递，因此对于sign组件，您可以使用destructuring，以便更改为：

function SignIn({ handleClick }) {
   // code...
   // Remove the () from `handleClick()` as that will immediately execute the function.
   <p className="panel-switcher" onClick={handleClick}>
}