加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react native 控件联动

发布时间:2020-12-15 07:28:27 所属栏目:百科 来源:网络整理
导读:需求: //控件联动//在修改下面的input内容后,上面的textview改变内容 步骤 //1 创建上面的textview //2 创建下面的input //3.监听input的内容改变 //4.根据修改state属性来保存修改的数据 //5.然后将修改的state属性传给子控件 //6.然后子控件利用props属性

需求:

//控件联动
//在修改下面的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);

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读