const log = (...value) => console.log(...value)

                import ReactDOM from 'react-dom'
                import React, { Component, PropTypes } from 'react'

                class NameForm extends Component {
                  constructor(props) {
                    super(props)
                    this.state = {
                      value: ''
                    }
                  }

                  // 实时修改表单值
                  handleChange (event) {
                    this.setState({value: event.target.value})
                  }

                  handleSubmit (event) {
                    log(this.state.value)
                    event.preventDefault()
                  }

                  bind (fn) {
                    return fn.bind(this)
                  }
                  
                  render () {
                    const handleChange = this.bind( this.handleChange )
                    const handleSubmit = this.bind( this.handleSubmit )
                    return (
                      <form onSubmit={handleSubmit}>
                        <p>{this.state.value}</p>
                        <label>
                          Name: <input type="text" value={this.state.value} onChange={handleChange} />
                        </label>
                        <input type="submit" value="Submit" />
                      </form>
                    )
                  }
                }

                ReactDOM.render(
                  <NameForm />,
                  document.querySelector('#box')
                )




                const log = (...value) => console.log(...value)

                import ReactDOM from 'react-dom'
                import React, { Component, PropTypes } from 'react'

                class EssayForm extends Component {
                  constructor(props) {
                    super(props)
                    this.state = {
                      value: '内容'
                    }
                  }

                  handleChange (event) {
                    this.setState({value: event.target.value})
                  }

                  handleSubmit (event) {
                    log(this.state.value)
                    event.preventDefault()
                  }

                  render () {
                    return (
                      <form onSubmit={this.handleSubmit.bind(this)}>
                        <lable>
                          Name:
                          <textarea value={this.state.value} onChange={this.handleChange.bind(this)}></textarea>
                        </lable>
                        <input type="submit" value="Submit" />
                      </form>
                    )
                  }
                }

                ReactDOM.render(
                  <EssayForm />,
                  document.querySelector('#box')
                )




                const log = (...value) => console.log(...value)

                import ReactDOM from 'react-dom'
                import React, { Component, PropTypes } from 'react'

                class FlavorForm extends Component {
                  constructor (props) {
                    super(props)
                    this.state = {value: 'coconut'}
                  }

                  handleChange (event) {
                    this.setState({value: event.target.value})
                  }

                  handleSubmit (event) {
                    log(this.state.value)
                    event.preventDefault()
                  }

                  render () {
                    // select 通过 value 控制select选中
                    return (
                      <form onSubmit={this.handleSubmit.bind(this)}>
                        <label>
                          <select value={this.state.value} onChange={this.handleChange.bind(this)}>
                            <option value="coconut">coconut</option>
                            <option value="小花">小花</option>
                            <option value="小蓝">小蓝</option>
                            <option value="小白">小白</option>
                          </select>
                        </label>

                        <input type="submit" value="Submit" />
                      </form>
                    )
                  }
                }

                ReactDOM.render(
                  <FlavorForm />,
                  document.querySelector('#box')
                )




                const log = (...value) => console.log(...value)

                import ReactDOM from 'react-dom'
                import React, { Component, PropTypes } from 'react'

                // 处理多个输入 给表单添加 name 通过属性表达式控制
                class Reservation extends Component {
                  constructor(props) {
                    super(props)
                    this.state = {
                      isGoing: true,
                      numberOfGuests: 2
                    }
                  }

                  handleInputChange (event) {
                    const target = event.target
                    const value = target.type === 'checkbox' ? target.checked : target.value
                    const name = target.name
                    // 通过setState 改变表单值
                    this.setState({
                      [name]: value
                    })
                  }

                  /**  
                  *  即时场验证
                   * 有条件地禁用提交按钮
                   * 执行输入格式
                   * 一个数据的几个输入
                   * 动态输入

                    这些最好都使用受控组件
                  */
                  render () {
                    return (
                      <form>
                        <label>
                          <input
                            // 给表单添加name 改变表单值 否则表单没变化
                            name="isGoing"
                            type="checkbox"
                            checked={this.state.isGoing}
                            // 必须监听 onChange 事件
                            onChange={ this.handleInputChange.bind(this) } 
                          />
                        </label>

                        <label>
                          <input
                            // 给表单添加name 改变表单值
                            name="numberOfGuests"
                            type="number"
                            value={this.state.numberOfGuests}
                            // 必须监听 onChange 事件
                            onChange={ this.handleInputChange.bind(this) } 
                          />
                        </label>
                      </form>
                    )
                  }
                }

                ReactDOM.render(
                  <Reservation />,
                  document.querySelector('#box')
                )