react组件的可控组件和不可控组件

责编:menVScode 2017-06-20 23:29 阅读(850)

        不可控组件:下面代码中defaultValue的值是固定的,这就是一个不可控组件 如果要获取input的value值,只有使用ref获取节点来获取值

<input type='text' defaultValue='hello React' />

        可控组件:下面代码中defaultValue的值是根据状态state确定了,只需要拿到this.state.value的值就可以了。

        这里需要注意一下:使用value的值是不可修改的,defaultValue的值是可以修改的。

<input type='text' defaultValue={this.state.value} />

        

        不可控组建,要是使用refs属性对DOM节点进行操作

class Uncontrol extends React.Component{
	send=()=>{
		var user = this.refs.user.value;
		var user2 = this.refs.user2.value;
		alert(user+'/'+user2);
	}
	render(){
		return(
			<div>
				<input ref='user' type='text' value='不可控组件' />
				<input ref='user2' type='text' defaultValue='可控组件' />
				<button onClick={this.send}>提交</button>
			</div>
		)
	}
}
export default Uncontrol;

        注意:在表单中,使用value是无法改变的,需要使用defaultValue, checked与defaultChecked跟value一样。

        可控组建,不需要对DOM进行操作

class Control extends React.Component{
	state={value:'可控组件+1'}
	send=()=>{
		alert(this.state.value)
	}
	doChange=()=>{
		this.setState({
			value:this.refs.user2.value
		})
	}
	render(){
		return(
			<div>
				<input ref='user2' type='text' defaultValue={this.state.value} onChange={this.doChange} />
				<button onClick={this.send}>提交</button>
			</div>
		)
	}
}
export default Control;

        可控组件的优点: 1、符合React的数据流; 2、数据存储在state中,便于获取; 3、便于处理数据;

标签: react reactjs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码