오늘도 많은 것을 배웠습니다. 기본적으로 javascript는 문법이 암호같아서 해독하기 참 어렵군요. 특히나 html 문서를 기술하는 render() 부분에서 뭔가를 표현하는 방법이 더 암호같아서 아주 힘들군요.

오늘은 radio 버튼에 대하여 정리합니다.

radio 버튼을 위하여 제공되는 명령어는 RadioButtonGroup, RadioButton입니다. 이름대로 직관적입데요.

코드를 보는 것이 더 설명하기 쉬울 것 같습니다. radio 버튼들을 RadioButtonGroup로 묶으면 됩니다.

return (
    <div>
    <div>
    <RadioButtonGroup
      legendText="Radio button heading"
      name="radio-button-group"
      onChange={onChange}
      defaultSelected="radio-2">
      
      <RadioButton labelText="Option 1" value="radio-1" id="radio-1" />
      <RadioButton labelText="Option 2" value="radio-2" id="radio-2" />
      <RadioButton labelText="Option 3" value="radio-3" id="radio-3" />
    </RadioButtonGroup>
    </div>
    <div>
    <hr/>
    <h6 align="left"> Selected {selected}</h6>
    </div> 
    </div>
  );

동작 형태는 아래와 같습니다. radio 버튼 동작은 carbon에서 알아서 해줍니다. 다만 누가 선택되었는지 확인이 필요하기 때문에 OnChange callback을 하나 등록합니다.

onChange 함수의 value 부분을 보면 어떤 버튼이 현재 선택되었는지 확인이 가능합니다.

  const onChange = (value, event) => {
    console.log("Click", value, event) // value = radio-1, event = radio-button-group
    setSelected(value)
  }

다음에는 웹페이지의 꽃이라고 할 수 있는 table에 대하여 정리하도록 하겠습니다.