Skip to content
Snippets Groups Projects
Commit 6f55d357 authored by JYCHOI's avatar JYCHOI
Browse files

add checkbox, radio button

parent 22226458
No related branches found
No related tags found
No related merge requests found
Source diff could not be displayed: it is too large. Options to address this: view the blob.
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
...@@ -4,7 +4,7 @@ import './assets/css/app.css'; ...@@ -4,7 +4,7 @@ import './assets/css/app.css';
const App = (props) => { const App = (props) => {
let [cartItems, setCartItems] = useState([]); let [cartItems, setCartItems] = useState([]);
let [showProduct, setShowProduct] = useState(true); let [showProduct, setShowProduct] = useState(true);
let [order, setOrder] = useState({firstName : '', lastName : ''}); let [order, setOrder] = useState({firstName : '', lastName : '', state : 'CA', address: ''});
let product = { let product = {
id: 1001, id: 1001,
...@@ -40,11 +40,11 @@ const App = (props) => { ...@@ -40,11 +40,11 @@ const App = (props) => {
} }
const updateFirstName = (event) => { const updateFirstName = (event) => {
setOrder({firstName : event.target.value, lastName: order.lastName}) setOrder({...order, firstName : event.target.value})
} }
const updateLastName = (event) => { const updateLastName = (event) => {
setOrder({firstName : order.firstName, lastName: event.target.value}) setOrder({...order, lastName: event.target.value})
} }
const updateAddress = (event) => { const updateAddress = (event) => {
...@@ -57,6 +57,31 @@ const App = (props) => { ...@@ -57,6 +57,31 @@ const App = (props) => {
setOrder({...order, state}) setOrder({...order, state})
} }
const updateOrder = (event) => {
let control = event.target;
let method = "home";
switch(control.id) {
case "home":
if(control.checked) {
method = "home";
}
console.log(control.value);
setOrder({...order, method: control.value})
break;
case "business":
if(control.checked) {
method = "business"
}
console.log(control.value);
setOrder({...order, method : control.value})
break;
case "gift":
console.log(control.value, control.checked);
setOrder({...order, gift : control.checked});
break;
}
}
return ( return (
<> <>
...@@ -128,6 +153,36 @@ const App = (props) => { ...@@ -128,6 +153,36 @@ const App = (props) => {
</select> </select>
</div> </div>
</div> </div>
<div className="form-group">
<div className="col-md-6 boxes">
{/* <div className="col-md-12"> */}
<input type="checkbox" id="gift" value={true} onChange={updateOrder}/>
<label htmlFor="gift">선물로 보내기?</label>
{/* </div> */}
</div>
</div>
<div className="form-group">
<div className="col-md-6 boxes">
{/* <div className="col-md-12"> */}
<input key="radio-1" type="radio" name="method" id="home" value="자택" defaultChecked={true} onChange={updateOrder} />
<label htmlFor="home">자택</label>
{/* </div> */}
<input key="radio-2" type="radio" name="method" id="business" value="직장" onChange={updateOrder} />
<label htmlFor="business">직장</label>
</div>
</div>
<div className="form-group">
<div className="col-md-6">
{/* <div className="col-md-12"> */}
<input type="submit" id="gift" className="btn btn-lg btn-primary submit"
onClick={()=>{alert("제출완료")}}/>
{/* </div> */}
</div>
</div>
<div className="col-md-12 verify"> <div className="col-md-12 verify">
<pre> <pre>
이름 : {order.firstName} 이름 : {order.firstName}
...@@ -137,6 +192,10 @@ const App = (props) => { ...@@ -137,6 +192,10 @@ const App = (props) => {
주소 : {order.address} 주소 : {order.address}
<br/> <br/>
: {order.state} : {order.state}
<br/>
배송지: {order.method}
<br/>
선물 : {order.gift ? "선물" : "선물아님"}
</pre> </pre>
</div> </div>
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment