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

Question

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

这是练习：

在功能组件中，创建一个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并仔细阅读文档。请不要复制粘贴。希望对您有所帮助。