React—select下拉列表

import React from 'react';
import ReactDom from 'react-dom';

class Select extends React.Component {
    constructor () {
        super();
        this.state = {
            value: ''
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange (e) { // 选择
        this.setState({
            value: e.target.value
        })
    }
    handleSubmit () {
        if (this.state.value == '') {
            alert('未选择')
        } else {
            alert('你的选择是' + this.state.value);
            e.preventDefault(); // 阻止默认行为，在提交之前需要验证的时候先拦截一下
        }
    }
    render () {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>你喜欢的水果是：</label>
                    <select onChange={this.handleChange}>
                        <option value="未选择">请选择</option>
                        <option value="apple">apple</option>
                        <option value="banana">banana</option>
                        <option value="pear">pear</option>
                        <option value="orange">orange</option>
                    </select>
                    <input type="submit" value="提交" />
                </form>
            </div>
        )
    }
}



ReactDom.render(
    <div>
        <Select />
    </div>,
    document.getElementById('root')
)