表单监控，
this.state实战练习
需求：定义一个组件，将用户在输入框内输入的内容进行实时显示
分析：组件与用户交换时，存在状态的变化，即输入框的值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react dome
</title>
<script src="./build/react.js"></script>
<script src="./build/react-dom.js"></script>
<script src="./build/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var Input = React.createClass({
getInitialState:function () {
return {
value:"请输入内容"
}
},
handleChange:function (event) {
this.setState({
value:event.target.value
})
},
render:function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
)
}
})
//渲染
ReactDOM.render(
<Input/>,
document.getElementById("container")
)
</script>
</body>
</html>
效果图显示：
转载请注明原文地址: https://www.6miu.com/read-65403.html
