表單

在React中一些數據都是狀態的表現，其中當然也包括表單數據，今天我們了解一下React中是如何處理表單數據的。

• 文本框
  文本框包括input輸入框和textarea文本域，下面用代碼舉個例子：

import React, {Component} from 'react'

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      inputValue: '',
      textareValue: ''
    }
  }

  handleInput(e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  handleTextarea(e) {
    this.setState({
      textareValue: e.target.value
    })
  }

  render() {
    const {inputValue, textareValue} = this.state
    return (
      <div>
        <input type="text" value={inputValue} onChange={this.handleInput.bind(this)}/>
        <textarea name="" id="" cols="30" rows="10" value={textareValue} onChange={this.handleTextarea.bind(this)}></textarea>
      </div>
    )
  }
}

注意上面，我們改變state狀態的值，還有如何獲取到表單輸入域的數據的。

• 單選按鈕和復選框

在單選框和復選框中，其值得表現不是通過value這個props進行表示的，而是通過checked這個props進行表示其選中和未選中的狀態。以下用radio舉一個例子：

import React, {Component} from 'react'

class App extends Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.state = {
      radioValue: ''
    }
  }

  handleChange(e) {
    this.setState({
      radioValue: e.target.value
    })
  }

  render() {
    const {radioValue} = this.state
    return (
      <div>
        <input type="radio" value="male" checked={radioValue === 'male'} onChange={this.handleChange}/>
        <input type="radio" value="female" checked={radioValue === 'female'} onChange={this.handleChange}/>
      </div>
    )
  }
}

• select組件

在HTML中select可以分為單選和多選的狀態，在React中可以設置multiple={true}實現多選下拉。我們看下select的用法：

import React, {Component} from 'react'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      area: ''
    }
  }
  handleChange(e) {
    this.setState({
      area: e.target.value
    })
  }


  render() {
    const {area} = this.state
    return (
      <div>
        <select value={area} onChange={this.handleChange.bind(this)}>
          <option value="bj">bj</option>
          <option value="sh">sh</option>
          <option value="ah">ah</option>
        </select>
      </div>
    )
  }
}

上面用個簡單的下拉框表示React如何處理select組件，但是在HTML中我們需要設置一個selected的屬性，表示某個下拉選項是默認選中的狀態，在React中，我們則是為select組件設置一個名為value的props表示選中的option，在設置為multiple的情況下value是一個數組。

• 受控組件

何為受控組件？在上面的例子我們可以看到，每當表單狀態發生變化的時候，都會被寫入到組件的state中，這種組件在React中被稱為受控組件。在受控組件中，組件的渲染狀態與它的value或者是checked相對應。React通過這個方式消除了組件的局部狀態。

• 非受控組件

那么何為非受控組件呢，如果一個表單元素沒有value props和checked props，那么可以稱為非受控組件。我們可以使用defaultValue和defaultChecked來表示組件的默認狀態。

在React中，非受控組件是一種反模式，他的值不受state和props的影響，所以要通過設置ref來王文渲染后的底層DOM元素。