在web应用开发中,表单的作用尤为重要，正是因为表单的存在，才使得用户能够与web应用进行富交互。
文本框
import React from 'react'
class App extends React.Component{
constructor(props){
super(props)
this.state = {
inputValue:'',
textareaValue:''
}
}
handleInputChange = (e) => {
this.setState({
inputValue:e.target.value
})
}
handleTextChange = (e) => {
this.setState({
textareaValue:e.target.value
})
}
render(){
const {inputValue,textareaValue} = this.state
return (
<div>
<p>单行输入框：<input type='text' value={inputValue} onChange={this.handleInputChange} /></p>
<p>多行输入框：<textarea type='text' value={textareaValue} onChange={this.handleTextChange} /></p>
</div>
)
}
}
export default App
你会发现表单操作变复杂了，一个简单的输入需要这么多代码，这是为什么呢？React.js 认为所有的状态都应该由 React.js 的 state 控制，只要类似于 <input />、<textarea />、<select /> 这样的输入控件被设置了 value 值，那么它们的值永远以被设置的值为准。值不变，value 就不会变化。
类似于 <input />、<select />、<textarea>这些元素的 value 值被 React.js 所控制、渲染的组件，在 React.js 当中被称为受控组件（Controlled Component）。对于用户可输入的控件，一般都可以让它们成为受控组件，这是 React.js 所推崇的做法。另外还有非受控组件
单选按钮与复选框
import React from 'react'
class App extends React.Component{
constructor(props){
super(props)
this.state = {
radioValue:''
}
}
handleChange = (e) => {
this.setState({
radioValue:e.target.value
})
}
render(){
const {radioValue} = this.state
return(
<div>
<p>gender:</p>
<label>
male:
<input
type='radio'
value='male'
checked={radioValue === 'male'}
onChange={this.handleChange}
/>
</label>
<label>
female:
<input
type='radio'
value='female'
checked={radioValue === 'female'}
onChange={this.handleChange}
/>
</label>
</div>
)
}
}
export default App
import React from 'react'
export default class App extends React.Component{
constructor(props){
super(props)
this.state = {
coffee:[]
}
}
handleChange = (e) =>{
const {checked,value} = e.target
let {coffee} = this.state
if(checked && coffee.indexOf(value) === -1){ //当前被点击且coffee不包含这个值
coffee.push(value)
}else{
coffee = coffee.filter(i => i!== value)
}
this.setState({
coffee
})
}
render(){
const {coffee} = this.state
return(
<div>
<p>请选择你最喜欢的coffee：</p>
<label>
<input
type='checkbox'
value='Cappuccino'
checked={coffee.indexOf('Cappuccino') !== -1}
onChange={this.handleChange}
/>
Cappuccino
</label>
<br />
<label>
<input
type='checkbox'
value='CafeMocha'
checked={coffee.indexOf('CafeMocha') !== -1}
onChange={this.handleChange}
/>
CafeMocha
</label>
<br />
<label>
<input
type='checkbox'
value='CaffeLatte'
checked={coffee.indexOf('CaffeLatte') !== -1}
onChange={this.handleChange}
/>
Caffe Latte
</label>
<br />
<label>
<input
type='checkbox'
value='Machiatto'
checked={coffee.indexOf('Machiatto') !== -1}
onChange={this.handleChange}
/>
Machiatto
</label>
</div>
)
}
}
这个相比文本框变得更复杂了...所以react的表单也是被诟病的一点
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(
<select value={area} onChange={this.handleChange}>
<option value='beijing'>北京</option>
<option value='shanghai'>上海</option>
<option value='hangzhou'>杭州</option>
<option value='wuhan'>武汉</option>
</select>
)
}
}
export default App
这里仅仅实现了单选的下拉列表，接下来实现多选下拉列表
import React, { Component } from 'react'
class App extends Component{
constructor(props){
super(props)
this.state = {
area:['hangzhou','wuhan']
}
}
handleChange = (e) => {
const options = e.target //对象
const area = Object.keys(options)
.filter(i => options[i].selected === true)
.map(i => options[i].value)
this.setState({
area
})
}
render(){
const {area} = this.state
return(
<select multiple={true} value={area} onChange={this.handleChange}>
<option value='beijing'>北京</option>
<option value='shanghai'>上海</option>
<option value='hangzhou'>杭州</option>
<option value='wuhan'>武汉</option>
</select>
)
}
}
export default App
受控组件
通过上面的示例，我们可以看出，每个input都绑定了一个change事件，每当表单的状态发生变化时，都会被写入到组件的state中，这种组件在react中被称为前面提到的受控组件。在受控组件中，组件渲染出的状态与它的value或checked prop相对应。react通过这种方式消除了组件的局部状态，使得应用的整个状态更加可控
总结下react受控组件更新state的流程
通过初始state设置表单的默认值
每当表单的值发生变化时，调用onChange事件处理器
事件处理器通过合成事件对象e拿到改变后的状态，并更新state
setState触发视图的重新渲染，完成表单组件值的更新
非受控组件
如果一个表单没有value props(单选按钮和复选框对应的是checked props)时，就可以称为非受控组件，对应的，我们可以使用defaluProps和defaultChecked prop来表示组件的默认状态
import React, { Component } from 'react'
export default class App extends Component{
constructor(props){
super(props)
}
handleSubmit =(e) => {
e.preventDefault();
const {value} = this.refs.name
console.log(value)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
<input ref='name' type='text' defaultValue='wuhan' />
<button type='submit'>Submit</button>
</form>
)
}
}
非受控组件实质上是通过ref prop来访问渲染后的底层dom，但它的值不受自身的state或props控制，react官方更推荐受控组件
