版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38323645/article/details/83348608
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09_form</title>
</head>
<body>
<input type="text" value="zhangyf">
<p>zhangyf</p>
<hr>
<div id="example"></div>
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
/*
受控组件
1. React是一个单向数据流
2. 但可以自定义双向数据流组件(受控组件)
*/
/*
功能: 自定义组件, 功能如下
1. 界面如页面所示
2. 初始数据显示为zhangyf
3. 输入数据时, 下面的数据同步变化
*/
class App extends React.Component{
constructor(props){
super(props);
this.state = {
msg:'zhangyf'
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event){
debugger;
console.log(event.target.value);
this.setState({
msg:event.target.value
});
}
render () {
let {msg} = this.state;
return (
<div>
<input onChange={this.handleChange} type="text" value={msg}/>
<p>{msg}</p>
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById("example"));
</script>
</body>
</html>
