react native 控件聯動

需求:

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



發佈了48 篇原創文章 · 獲贊 5 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章