From b6969bea689340441c6b8fd228c11d88736168ab Mon Sep 17 00:00:00 2001 From: JYC <mobilechoi@ajou.ac.kr> Date: Mon, 3 Apr 2023 14:27:04 +0900 Subject: [PATCH] add form - firstname & lastname --- src/App.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 3e600c4..0b65063 100755 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import './assets/css/app.css'; const App = (props) => { let [cartItems, setCartItems] = useState([]); let [showProduct, setShowProduct] = useState(true); + let [order, setOrder] = useState({firstName : '', lastName : ''}); let product = { id: 1001, @@ -38,6 +39,14 @@ const App = (props) => { return product.availableInventory > cartItems.length; } + const updateFirstName = (event) => { + setOrder({firstName : event.target.value, lastName: order.lastName}) + } + + const updateLastName = (event) => { + setOrder({firstName : order.firstName, lastName: event.target.value}) + } + return ( <> <header> @@ -80,7 +89,23 @@ const App = (props) => { </> } {!showProduct && /* Checkout 페이지 들어갈 자리 */ - <div></div> + <div> + <div className="col-md-6"> + <strong>이름</strong> + <input className="form-control" value={order.firstName} onChange={updateFirstName}/> + </div> + <div className="col-md-6"> + <strong>성</strong> + <input className="form-control" value={order.lastName} onChange={updateLastName}/> + </div> + <div className="col-md-12 verify"> + <pre> + 이름 : {order.firstName} + <br/> + 성 : {order.lastName} + </pre> + </div> + </div> } </div> </main> -- GitLab