受控组件就是为某个form表单组件添加value属性。
形式如下:
render:function(){
return <input type="text" value="Hello!" />
}
添加了value
属性的表单组件元素其内部是不会维护自己状态state
,组件的value
值一旦设置某个具体值就始终是这个值,所以需要调用者来控制组件value
的改变。
这种写法会带来一个问题:渲染后input
组建的用户交互,用户输入的任何值将不起作用,input
输入框中的值始终为Hello!
这与input
表现不一致。
为此,为了控制该组件,就需要能够控制input
组件的值,需要借助其内部的状态state
,即组件内部要维护一个状态state
以便于配合input
组建的onChange
和setState
方法来完成对组建的控制;例如对上面形式可以进行封装一个inputItem
组件,其内部维护一个state
状态,具体代码如下:
export default class InputItem extends React.Component{
constructor(props){
super(props);
this.state = {
value: ""
}
}
componentWillReceiveProps(nextProps){
this.setState({
value: nextProps.value
})
}
_onChange(evt){
this.setState({
value: evt.target.value
})
}
render(){
return (
<input type="text"
value={this.state.value}
onChange={this._onChange.bind(this)}/>
);
}
}
这样就可以在外部调用组件了:
<InputItem value="this.state.userName" />
这样就可以控制react的input
组件了,其实就是需要借助react的有状态component
来完成,因为有状态component
可以内部维护state
。
非受控组件表现形式上,react中没有添加value
属性的表单组件元素就是非受控组件。表现形式如下:
<input type="text" />
非抽空组件
再底层实现时实在其内部维护了自己的状态state,这样表现出用户输入任何职都能反映到
元素上。
总结
在使用react component时,都会遇到受控组件或者非受控组件;在目前,react组件推荐使用stateless component
,但是使用该形式来实现react component时使用非受控组件到倒是没有什么大问题,若是需要控制受控元素就会有出现问题,表现在:
`受控组件`需要主动维护一个内部state状态的,而`stateless component`是无需维护组件的state状态的,二者有冲突。
所以,受控元素就不能使用stateless componen
t来创建。
鉴于受控组件与非受控组件的特点,二者应用的地方也有所不同,主要表现在:
受控元素,一般用在需要动态设置其初始值的情况;例如某些form表单信息编辑时,input表单元素需要初始显示服务器返回的某个值然后进行编辑。
非受控元素, 一般用于无任何动态初始值信息的情况; 例如form表单创建信息时,input表单元素都没有初始值,需要用户输入的情况