Как построить многофункциональную компонентную форму с зацепками в реаги?

Question

У меня есть одна форма App.js (родительская), которая отображает два отдельных (дочерних) компонента, которые создают эту форму: Email.js и Button.js.

При нажатии кнопки появляется предупреждениевход собрал.

Код ниже, насколько я понимаю.Может ли кто-нибудь помочь мне:

1. завершить два компонента и
2. успешно соединить их с Родителем (App.js)?

Я получил этов качестве упражнения, где мне было показано, как это работает с компонентами класса.У меня есть трудности с переводом этого в функциональные компоненты с несколькими детьми.

Это моя структура App.js:

import React, { useState } from 'react';
import Button from './components/Button.js';
import Email from './components/Email.js';


function App() {

  return (
    <div>
      <form>
        <Email />
        <Button />
      </form>
    </div> 
  );
}

export default App;

My Email.js:

import React, { useState } from "react"

function Email() {

  const [input, inputChange] = useState({email: ""})

  const handleChange = (event) => {
    inputChange({[event.target.name]: event.target.value})
  } 

  return (
    <div className = "form-group">
        <label>Email adress </label>
        <input
            type="text"
            name="email"
            placeholder="Enter your email!"
            value = {input.email}
            onChange = {handleChange}
        />
    </div>
  )
}

export default Email

И моя кнопка:

import React, { useState} from "react"

function Button() {

    return (
        <div>
            <button onClick={handleClick}>Click me></button>
        </div>
    )

}

export default Button 

Answer 1

Посмотрите, работает ли это для вас:

function App() {

  const [email,setEmail] = React.useState('hello@world.com');
  
  function changeEmail(event) {
    setEmail(event.target.value);
  }
  
  function handleClick() {
    alert('The email entered was: ' + email);
  }

  return(
    <React.Fragment>
      <Email
        email={email}
        changeEmail={changeEmail}
      />
      <Button
        handleClick={handleClick}
      />
    </React.Fragment>
  );
}

function Email(props) {
  return(
    <input type='email' value={props.email} onChange={props.changeEmail}/>
  );
}

function Button(props) {
  return(
    <button onClick={props.handleClick}>Click</button>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>