受控组件
1. React是一个单向数据流
2.但可以自定义双向数据流组件(受控组件)
下面一个小例子:
/*
功能: 自定义组件, 功能如下
1. 界面如页面所示
2. 初始数据显示为atguigu
3. 输入数据时, 下面的数据同步变化
*/
class TwoWay extends React.Component{
constructor(props){
super(props);
this.state={
msg:"zhangjing"
}
this.handleChange=this.handleChange.bind(this);
}
handleChange(event){
let msg=event.target.value;
this.setState({
msg
})
}
render(){
return (
<div>
<input type="text" value={this.state.msg} onChange={this.handleChange} />
<p>{this.state.msg}</p>
</div>
)
}
}
ReactDOM.render(<TwoWay />,document.getElementById('example'));