앞에서 언급한 것처럼 value는 변경할 필요가 없으므로 하드코딩되어 있다. 사용자 조작에 의해 변경되는 것은 요소의 checked 속성으로 다음 예제를 통해 살펴보자(ch07/elements/jsx/content.jsx).

 

예제 코드 7.1 라디오 버튼의 렌더링과 변경 처리

class Content extends React.Component {
    constructor(props) {
        super(props)
        this.handleRadio = this.handleRadio.bind(this)
        ...
        this.state = {
            ...
            radioGroup: {
                angular: false,
                react: true, ---- 상태에서 기본으로 선택된 라디오 버튼을 설정한다.
                polymer: false
            }
        }
    }
    handleRadio(event) {
        let obj = {} // erase other radios
        obj[event.target.value] = event.target.checked // true ---- target.checked 속성을 이용해서 라디오 버튼이 선택되었는지 여부를 확인한다.
        this.setState({radioGroup: obj})
    }
    ...
    render() {
        return <form>
            <input type="radio"
                name="radioGroup"
                value='angular'
                checked={this.state.radioGroup['angular']} ---- 상태 객체 또는 상태 객체에 있는 한 값에서 필요한 값을 가져와서 사용할 수 있다.
                onChange={this.handleRadio}/> ---- target.value로 라디오 버튼의 value를 확인할 수 있으므로 동일한 onChange 이벤트 핸들러를 사용한다.
            <input type="radio"
                name="radioGroup"
                value='react'
                checked={this.state.radioGroup['react']}
                onChange={this.handleRadio}/>
            <input type="radio"
                name="radioGroup"
                value='polymer'
                checked={this.state.radioGroup['polymer']}
                onChange={this.handleRadio}/>
            ...
        </form>
    }
}

---