React中如何将子组件的函数传递给父组件答案

【问题标题】：How to Pass a function from Child component to Parent Component in ReactReact中如何将子组件的函数传递给父组件
【发布时间】：2021-09-30 08:08:15
【问题描述】：

我正在使用 React，因为我有一个父组件，即 App.js。在那个父组件中，我有一个子组件，即 Child.js，我有两个按钮注册和登录。在子组件中，默认情况下，我在输出中有注册表单和登录表，我必须显示注册表单当我单击登录按钮时，我必须只显示登录表单。这里的逻辑是我需要将函数从子组件传递给父组件

这是 App.js

import React from "react";
import { Button, Row, Col } from "antd";
import 'antd/dist/antd.css';
import Child from "./Child/Child";
import "./App.css";

const App = () => {
  return (
    <div style={{display: "flex", justifyContent: "center", marginTop: "50px"}}>
      <Row>
        <Col span={24}>
          <Button type="primary">Signup</Button>
          <Button type="primary"  style={{marginLeft: "10px"}}>Login</Button>
          <Child />
        </Col>
      </Row>
    </div>
  )
}

export default App

这是 Child.js

import React, { useState } from "react";
import { Button } from "antd";
import { Form, Input } from 'antd';
import "./Child.css";

const Child = () => {
    const [showSignupForm, setSignupForm] = useState(true)
    const [hideLoginForm, setHideLoginForm] = useState(false)

    const showLoginForm = () => {
        setHideLoginForm(true)
        setSignupForm(false)
    }

    const viewSignupForm = () => {
        setHideLoginForm(false)
        setSignupForm(true)
    }

    return (
        <div>
            {showSignupForm &&
                <Form style={{ marginTop: "50px" }}
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                >
                    <Form.Item
                        label="Firstname"
                        name="firstname"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your firstname!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Lastname"
                        name="lastname"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your lastname!',
                            },
                        ]}
                    >


                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Email"
                        name="email"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your email!',
                            },
                        ]}
                    >


                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Password"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            }
            {hideLoginForm &&
                <Form style={{ marginTop: "50px" }}
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                >
                    <Form.Item
                        label="Username"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Password"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            }
        </div>
    )
}

export default Child

【问题讨论】：

经典的“提升状态”案例。将状态和回调从子组件移动到父组件，并将它们作为道具传递给子组件。
这能回答你的问题吗？ Call child method from parent
您可以使用 refs 实现您想要的，但正如他们在链接答案中所说，这几乎总是一个设计问题的迹象，并且可以通过提升状态或通过提升状态来更好地解决用例介绍上下文。

标签： reactjs

【解决方案1】：

你只需要一个 useState 在这里，你可以定义你的钩子

const [fromType, setFormType] = useState("login")

在父组件中，然后通过道具将 formType 传递给子组件，像这样：

<Child formType={formType} />

然后，在您的子组件中写入

{ props.formType === "login" ? ( retrun login form ) : ( retrun singup form )}

然后为更改您的表单在按钮上设置 Onclick 事件，如下所示：

<Button onClick={()=>{setFormType("singup")}}>Signup</Button>

<Button onClick={()=>{setFormType("login")}}>Login</Button>

【讨论】：