React：将数据从子组件发送到父组件

Question

这是一个反应初学者练习，所以我正在寻找最简单的解决方案。我目前正在学习 React，所以任何有用的 cmets 也将不胜感激。提前致谢！

这是练习：

在功能组件中，创建一个 div，其中包含 2 个输入和一个按钮。

每一个都应该是一个单独的子组件，都由一个名为 App 的父组件呈现。

您应该从输入中收集数据并使其在父组件中可用（使用函数可以解决此问题）。

输入 1 应该收集用户的电子邮件。 输入 2 应该收集用户的密码。

当按钮（也是一个单独的组件）被点击时，你应该提醒两个输入收集的数据。

您应该使用onChange 和onClick 事件

我不太确定我必须对 Button 组件做什么。这是我到目前为止的练习，但我认为这是错误的？......

APP.JS

import React from 'react'
import Email from './components/Email'
import Password from './components/Password'

const App = () => {

  getData  = data => '${data}'

  return ( <div>
              <Email getData = {getData} />
              <Password getData = {getData} />
           </div>
    )
  }

export default App

EMAIL.JS

import React from 'react'

const App = () => {

    let email = '';

        return (
            <button onClick ={()=>props.getData({email})}></button>
         );
      }
export default Email;

PASSWORD.JS

import React from 'react'

const App = () => {

    let password = '';

        return (
            <button onClick ={()=>props.getData({password})}></button>
         );
      }
export default Password;

BUTTON.JS

Answer 1

我已经为此创建了一个解决方案和一个沙盒。

App.js

import React, { useState } from "react";
import Email from "./components/Email";
import Password from "./components/Password";
import Button from "./components/Button";
const App = () => {
  const [email, setEmail] = useState("");
  const [password, setpassword] = useState("");
  const [submit, setSubmit] = useState(false);
  if (submit) {
    console.log("email ", email);
    console.log("password ", password);
  }
  return (
    <div>
      <Email setEmail={setEmail} />
      <Password setpassword={setpassword} />
      <Button setSubmit={setSubmit} />
    </div>
  );
};

export default App;

Password.js

import React from "react";

const Password = ({ setpassword, submit }) => {
  return (
    <>
      Get Password
      <input type="password" onChange={e => setpassword(e.target.value)} />
    </>
  );
};
export default Password;

Email.js

import React from "react";

const Email = ({ setEmail }) => {
  return (
    <>
      Get Email
      <input type="text" onChange={e => setEmail(e.target.value)} />
    </>
  );
};
export default Email;

Button.js

import React from "react";

const Button = ({ setSubmit }) => {
  return (
    <button
      onClick={() => {
        setSubmit(true);
      }}
    >
      Submit
    </button>
  );
};
export default Button;

我强烈建议您在开始任何课程之前访问 reactjs.org 并查看文档。请不要复制粘贴。希望对你有帮助。