可控组件
<input type="text" value={this.state.helloTo} />
像这个代码中,我们可以看出,value的值是由状态来确定的,只要拿到this.state.helloTo的值就可以。
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可控组件</title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
var MyForm=React.createClass({
getInitialState:function(){
return ({helloTo:"World"});
},
submitHandler:function(event){
event.preventDefault();
alert(this.state.helloTo);
},
handleChange:function(event){
this.setState({helloTo:event.target.value});
},
render:function(){
return (
<form onSubmit={this.submitHandler}>
<input type="text" value={this.state.helloTo} onChange={this.handleChange}/>
<button type="submit">Speak</button>
</form>
);
}
});
ReactDOM.render(<MyForm></MyForm>,document.body);
</script>
</body>
</html>
不可控组件
<input type="text" defaultValue="Hello World" ref="helloTo"/>
像这样,defaultValue的值是一个确定的值,所以这是一个不可控的组件。
如果想要获取input中的value的值。我们需要通过ref来获取。
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>不可控组件</title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
var MyForm=React.createClass({
submitHandler:function(event){
event.preventDefault();
var helloTo=ReactDOM.findDOMNode(this.refs.helloTo).value;
alert(helloTo);
},
render:function(){
return(
<form onSubmit={this.submitHandler}>
<input type="text" defaultValue="Hello World" ref="helloTo"/>
<button type="submit">Speak</button>
</form>
);
}
});
ReactDOM.render(<MyForm></MyForm>,document.body);
</script>
</body>
</html>
可控组件的优点
- 符合react的数据流
- 数据存储在state中,便于获取
- 便于数据的处理