Question

7.1 表单

受控与非受控组件就是专门适用于 React 当中的表单元素的

• 只要是有表单出现的地方，就会有用户输入，就会有表单事件触发，就会涉及的数据处理
• 在我们用 React 开发应用时，为了更好地管理应用中的数据，响应用户的输入，编写组件的时候呢，我们就会运用到受控组件与非受控组件这两个概念。

7.2 表单元素

我们在组件中声明表单元素时，一般都要为表单元素传入应用状态中的值，可以通过 state 也可以通过 props 传递，之后需要为其绑定相关事件，例如表单提交，输入改变等。在相关事件触发的处理函数中，我们需要根据表单元素中用户的输入，对应用数据进行相应的操作和改变

class ControlledInput extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: ""
    }
  }

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

  render() {
    return <input 
              type="text" 
              value={this.state.value} 
              onChange={() => this.handleChange()} 
            />
  }
}

受控组件的输入数据是一直和我们的应用状态绑定的，事件处理函数中一定要有关 state 的更新操作，这样表单组件才能及时正确响应用户的输入

textarea

<!--HTML-->
<textarea>
  Hello there, this is some text in a text area
</textarea>

<!--jsx-->
<textarea value={this.state.value} onChange={this.handleChange} />

select

<!--HTML-->
<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

<!--jsx-->
<select value={this.state.value} onChange={this.handleChange}>
    <option value="grapefruit">Grapefruit</option>
    <option value="lime">Lime</option>
    <option value="coconut">Coconut</option>
    <option value="mango">Mango</option>
</select>

7.3 事件

<!--HTML-->
<button onclick="activateLasers()">
  Activate Lasers
</button>

<!--jsx-->
<button onClick={activateLasers}>
  Activate Lasers
</button>