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

【问题标题】：Change Parent Component State from Child functional component in React在 React 中从子功能组件更改父组件状态
【发布时间】：2021-03-23 15:48:30
【问题描述】：

我创建了一个签名页面组件，其中包含登录组件和注册组件。我的问题是如何将 onClick 函数从父级传递给子级以更改父组件（签名页面组件）的状态？我期望的是，通过单击子组件中的按钮，可以切换父组件的活动状态，并且可以根据活动状态更改样式。我正在尝试将 handleClick 函数从父级传递给子级，但效果不佳。

有什么解决办法吗？

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>
  );
}

在我的子组件中 (SignIn / SignUp)

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;

【问题讨论】：

标签： reactjs

【解决方案1】：

你快到了，props 作为第一个参数中的对象传递，因此对于 SignIn 组件，你可以使用解构，因此更改为：

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

【讨论】：

【解决方案2】：

首先，组件的props是object类型。

所以，如果你想在 child 中获得 handleClick，它应该如下所示。

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

其次，当处理一个函数给孩子时，它不应该被调用。

例如，如下所示。

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

【讨论】：