react native 控件联动

前端之家收集整理的这篇文章主要介绍了react native 控件联动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

需求:

  1. //控件联动
  2. //在修改下面的input内容后,上面的textview改变内容
  1.  
  1. 步骤
  1. //1 创建上面的textview
    //2 创建下面的input
    //3.监听input的内容改变
    //4.根据修改state属性来保存修改的数据
    //5.然后将修改的state属性传给子控件
    //6.然后子控件利用props属性显示数据
  1. var Text = React.createClass({
  2.     render : function(){
  3.         return <div>你好:{this.props.text}</div>
  4.     }
  5. });
  6. var DadInput = React.createClass({
  7.     getInitialState : function(){
  8.         return {text:''}
  9.     },handleChange : function(e){
  10.         this.setState({text : e.target.value});
  11.     },render : function(){
  12.         return <div>
  13.             <Text text = {this.state.text}/>
  14.             <input onChange={this.handleChange}/>
  15.         </div>
  16.     }
  17. });
  18. ReactDOM.render(<DadInput/>,document.body);

猜你在找的React相关文章