表单:
	React中表单，和html中用法有点不一样


	input   text
	input	radio
	input	checkbox
	select

	<input type="text" value="xxx" />
	<input type="radio" checked />
	<textarea>这里面写值</textarea>

在React中使用表单注意：
1. value / checked 属性设置后，用户是无法操作的
2. textarea 的值建议设置到value属性
3. select的value属性，值代表选中值，不建议使用option的selected属性
4. input/textarea 会有 onChange， 用户每次输入都会触发(和oninput表现一样)， 不是失去焦点触发
5. radio/checkbox 点击后会 onChange

提交表单:


表单在react分类:
	1. 受控表单	受React程序控制
		提交数据， onChange，改变state
	2. 非受控表单	平时很正常
		提交数据    原生DOM方式，  ref

		给默认是:
			text  textarea  select	需要写  defaultValue
			checkbox radio		需要写  defaultChecked

<script type="text/babel">
    class Demo extends React.Component{
        constructor(){
            super();

            this.state={
                msg:''
            };
        }
        handleChange(){
            let oInput = this.refs.input;

            this.setState({
                msg:oInput.value
            })
        }
        render(){
            return (<div>
                <input type="text" ref="input" onInput={this.handleChange.bind(this)}/>
                <div>{this.state.msg}</div>
            </div>)
        }
    }

    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    class Demo extends React.Component{
        constructor(){
            super();

            this.state={
                msg:''
            };
        }
        handleChange(ev){
            this.setState({
                msg:ev.target.value
            })
        }
        render(){
            return (<div>
                <input type="text" onInput={this.handleChange.bind(this)}/>
                <div>{this.state.msg}</div>
            </div>)
        }
    }

    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    class Demo extends React.Component{
        constructor(){
            super();

            this.state={
                msg:''
            };
        }
        handleChange(ev){
            this.setState({
                msg:ev.target.value
            })
        }
        render(){
            return (<div>
                <input type="text" onChange={this.handleChange.bind(this)}/>
                <div>{this.state.msg}</div>
            </div>)
        }
    }

    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    let Component = React.Component;
    class Demo extends Component{
        constructor(){
            super();
        }
        handleSubmit = (ev) =>{
            let username = this.refs.username.value;
            alert(username);
            ev.preventDefault();
        }
        render(){
            return (<div>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        姓名:
                        <input ref="username" type="text" name="username" defaultValue="aaa" />
                    </label>
                    <label>
                        多选:
                        <input ref="check" type="checkbox" name="username" defaultChecked/>
                    </label>
                    <button>提交</button>
                </form>
            </div>)
        }
    }

    ReactDOM.render(
        <Demo />,
        document.querySelector('#root')
    )
</script>