时间戳

首页 > 解决方案 > 在 React 中从子功能组件更改父组件状态

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

问题描述

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

有什么解决办法吗？

密码箱中的详细信息： 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

解决方案

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

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

推荐阅读