과제 리뷰3
src/components/HourSelector/HourSelector.js
import React, { useState } from "react";
import { hours } from "../../Common/Common";
import "./index.scss";
const HourSelector = (props) => {
const [show, setShow] = useState(false);
const [selectHour, setSelectHour] = useState("");
const _setOptions = () => {
let hourArr = [];
for (let i = 0; i < hours.length; i++) {
hourArr.push(
<div
className="options"
onClick={() => {
setSelectHour(hours[i]);
let dateObj =
props.status === "start"
? Object.assign({}, props.date, {
startHour: hours[i],
})
: Object.assign({}, props.date, {
finishHour: hours[i],
});
props.viewAction.receiveView("date", dateObj);
setShow(false);
}}
key={hours[i]}
>
{hours[i]}
</div>
);
}
return hourArr;
};
return (
<div className="scroll">
<input
onClick={() => setShow(!show)}
readOnly
placeholder="시간 선택"
value={selectHour}
style={{ backgroundColor: selectHour ? "#efefef" : "" }}
className={`hour-selector-input ${show}`}
/>
{show && <div className="select-wrapper">{_setOptions()}</div>}
</div>
);
};
export default HourSelector;
- input 을
readonly
처리한다. - click 하게 되면
show
를 true 로 바뀌어select-wrapper
를 보여준다. - 들어가는 내용을 보면
"../../Common/Common"
에서[오전12시, 오후 1시, ...]
와 같은 배열을 미리 만들어 줬다. 그 배열의 길이만큼 for 문을 돌게 되는데,<div>
로 묶어 빈 어레이 (hourArr)에 push 해준다. - 클릭 하게 되면 status 에 따라서 (start 인지) store 에 저장할 key 이름을 변경해서 저장한다.
minuteSelector 역시 지금 컴포넌트와 똑같은 로직으로 작동한다.
Author And Source
이 문제에 관하여(과제 리뷰3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kyjun/과제-제출3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)