表单
在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元素。
