http://react.tips/radio-buttons-in-react-16/
input에 value, checked, onChange를 적절하게 구성하는게 포인트다.
주의점이라면 Change를 핸들링하는 함수에 e.preventDefault()를 하지 않아야 한다는 것이다.
만약 prevent를 하게 되면 더블 클릭해야만 라디오에 체크가 되고 이는 유저 경험을 저해하는 요인으로 작용한다.
const changeRadioQ1 = (e) => {
setQ1(e.target.value);
};
const changeRadioQ2 = (e) => {
setQ2(e.target.value);
};
orm style={{ display: "flex", flexDirection: "column" }}>
<p>Q1: What brings you here?</p>
<label htmlFor="asdf">
<input
type="radio"
id="asdf"
name="asdf"
value="asdf"
checked={Q1 === "asdf" ? true : false}
onChange={changeRadioQ1}
></input>
asdf
</label>
<label htmlFor="asdf">
<input
type="radio"
id="asdf2"
name="asdf2"
value="asdf2"
checked={Q1 === "asdf2" ? true : false}
onChange={changeRadioQ1}
></input>
asdf2
</label>
'React, Next, Redux > ⚛ React.JS' 카테고리의 다른 글
커스텀 Hoc 만들기 (0) | 2020.06.17 |
---|---|
react-intl 적용하여 번역을 지원하는 Internationalization 하기 (0) | 2020.06.10 |
HOC을 통한 인증 미들웨어 (0) | 2020.05.30 |
React에서의 form 구성과 post 방법 (0) | 2020.05.08 |
react-slick을 이용한 캐러셀 슬라이더 (0) | 2020.04.18 |