需求:
//控件聯動 //在修改下面的input內容後,上面的textview改變內容
步驟
//1 創建上面的textview
//2 創建下面的input
//3.監聽input的內容改變
//4.根據修改state屬性來保存修改的數據
//5.然後將修改的state屬性傳給子控件
//6.然後子控件利用props屬性顯示數據
var Text = React.createClass({
render : function(){
return <div>你好:{this.props.text}</div>
}
});
var DadInput = React.createClass({
getInitialState : function(){
return {text:''}
},
handleChange : function(e){
this.setState({text : e.target.value});
},
render : function(){
return <div>
<Text text = {this.state.text}/>
<input onChange={this.handleChange}/>
</div>
}
});
ReactDOM.render(<DadInput/>,document.body);