Day13 React- Forms(1)

小实作React Form 和Event的应用，使用useState Hook，让input输入的值，经按下Button，input中的值会在Shopping List中显示。

import React , {useState} from 'react';

const Forms = () => {

    const [name, setName] = useState ("");
    const [fullName, setFullName] = useState();

    const inputEvent = (event)=>{       
       setName(event.target.value);
       
    };

    const onSubmit = () =>{
        setFullName(name);
    };

    const goBack = ()=>{
        setFullName("");
    }
    
    return (
        <div>
           <div className="container">
      <div className="form" >
      <h2>Shopping Form</h2>
      <input 
               type="text" 
               placeholder="Enter You Name" 
               onChange={inputEvent} 
               value={name} />
      <button onClick={onSubmit} onDoubleClick={goBack} >Buy Now</button>  
  </div>
</div>

<div className="demo">
   <div className="wrapper">
   
       <h2>Shopping List</h2>
       <h3 >Your Ordered:</h3>
       <h3 >{fullName}</h3>
   </div> 
</div>
        </div>
    );
};

export default Forms