체크박스도 라디오 버튼과 비슷한 방법을 사용한다. checked 속성을 사용하고, 상태에 불 값을 저장한다. 다음 예제 코드에서는 불 값을 checkboxGroup 상태에 저장했다.

class Content extends React.Component {
  constructor(props) {
      super(props)
      this.handleCheckbox = this.handleCheckbox.bind(this)
      // ...
      this.state = {
          // ...
          checkboxGroup: {
              node: false,
              react: true,
              express: false,
              mongodb: false
          }
      }
  }

 

생성자에서 바인딩한 이벤트 핸들러가 현재 값을 가져오고, event.target.value를 이용해서 true 또는 false를 추가하여 상태를 설정한다.

handleCheckbox(event) {
  let obj = Object.assign(this.state.checkboxGroup)
  obj[event.target.value] = event.target.checked ---- true 또는 false
  this.setState({checkboxGroup: obj})
}