<select> 요소도 React와 일반 HTML 간에 동작의 차이가 있다. 예를 들면 일반적인 HTML에서는 선택된 요소의 순서를 확인하기 위해 selectDOMNode.selectedIndex를 사용한다. 그렇지만 React에서는 다음 예제 코드처럼 <select>에 value 속성을 사용한다(ch07/elements/jsx/content.jsx).

 

예제 코드 7.3 폼 요소 렌더링

...
constructor(props) {
    super(props)
    this.state = {selectedValue: 'node'}
}
handleSelectChange(event) {
    this.setState({selectedValue: event.target.value})
}
...
render() {
    return <form>
        <select
            value={this.state.selectedValue}
            onChange={this.handleSelectChange}>
                <option value="ruby">Ruby</option>
                <option value="node">Node</option>
                <option value="python">Python</option>
        </select>
    </form>
}
...

---