React에서 radio button 사용법

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>