成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

react組件間的信息交流數(shù)據(jù)傳遞圖文講解

yvonne / 3397人閱讀

摘要：子組件請(qǐng)輸入郵箱父組件，此處通過(guò)獲取子組件的值用戶郵箱兄弟組件傳遞信息我們可以通過(guò)給這兩兄弟一個(gè)共同的父親，然后結(jié)合上面的兩種方法將老大的信息傳給父親子傳父，再通過(guò)父親傳給老二信息實(shí)現(xiàn)交流父?jìng)髯舆@里只寫(xiě)出了父組件代碼實(shí)現(xiàn)到的數(shù)據(jù)傳遞

React 組件之間交流的方式，可以分為以下 3 種：
a【父組件】向【子組件】傳值；
b【子組件】向【父組件】傳值；
c 沒(méi)有任何嵌套關(guān)系的組件之間傳值（PS：比如：兄弟組件之間傳值）
1.父組件向子組件傳遞信息

這個(gè)比較容易和直觀

// 父組件
var MyContainer = React.createClass({
  getInitialState: function () {
    return {
      checked: true
    };
  },
  render: function() {
    return (
      
    );
  }
});

// 子組件
var ToggleButton = React.createClass({
  render: function () {
    // 從【父組件】獲取的值
    var checked = this.props.checked,
        text = this.props.text;

    return (
        
    );
  }
});

2子組件向父組件傳遞信息

子組件需要控制自己的 state， 然后告訴父組件自己的state，通過(guò)props調(diào)用父組件中用來(lái)控制state的函數(shù)，在父組件中展示子組件的state變化。

//子組件
var Child = React.createClass({
    render: function(){
        return (
            

                請(qǐng)輸入郵箱：
            

        )
    }
});
//父組件，此處通過(guò)event.target.value獲取子組件的值
var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ""
        }
    },
    handleEmail: function(event){
        this.setState({email: event.target.value});
    },
    render: function(){
        return (
            

                
用戶郵箱：{this.state.email}

                
            

        )
    }
});
React.render(
  ,
  document.getElementById("test")
);

3.兄弟組件傳遞信息 
我們可以通過(guò)給這兩兄弟一個(gè)共同的父親，然后結(jié)合上面的兩種方法
將老大的信息傳給父親（子傳父），再通過(guò)父親傳給老二信息實(shí)現(xiàn)交流（父?jìng)髯樱?/pre>

這里只寫(xiě)出了父組件代碼實(shí)現(xiàn)input到list的數(shù)據(jù)傳遞


class CommentApp extends Component {
    constructor() {
        super()
        this.state = {
            arry: []
        }
    }
    getDate(obj) {
        this.state.arry.push(obj)
        this.setState({
            arry: this.state.arry
        })
        console.log(this.state.arry)
    }
    render() {
        return (
            

                
                
            

        )
    }
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116945.html

相關(guān)文章

  • react-navigation使用詳解

    摘要：導(dǎo)航組件使用詳解注意了，如果有小伙伴們發(fā)現(xiàn)運(yùn)行作者提供的示例項(xiàng)目報(bào)如下的錯(cuò)誤，可能是大家使用了命令導(dǎo)致的，解決這個(gè)錯(cuò)誤的辦法就是將刪除，然后重新使用命令來(lái)安裝，最后使用來(lái)起服務(wù)，應(yīng)該就不報(bào)錯(cuò)了。 react-navigation導(dǎo)航組件使用詳解 注意了，如果有小伙伴們發(fā)現(xiàn)運(yùn)行作者提供的react-navigation示例項(xiàng)目報(bào)如下的錯(cuò)誤，可能是大家使用了 yarn install 命...

    stonezhu 評(píng)論0 收藏0

  • React 組件之間如何交流

    摘要：前言今天群里面有很多都在問(wèn)關(guān)于組件之間是如何通信的問(wèn)題，之前自己寫(xiě)的時(shí)候也遇到過(guò)這類(lèi)問(wèn)題。英文能力有限，如果有不對(duì)的地方請(qǐng)跟我留言，一定修改原著序處理組件之間的交流方式，主要取決于組件之間的關(guān)系，然而這些關(guān)系的約定人就是你。 前言 今天群里面有很多都在問(wèn)關(guān)于 React 組件之間是如何通信的問(wèn)題，之前自己寫(xiě)的時(shí)候也遇到過(guò)這類(lèi)問(wèn)題。下面是我看到的一篇不錯(cuò)英文版的翻譯，看過(guò)我博客的人都知道...

    tomlingtm 評(píng)論0 收藏0

  • React 新特性講解及實(shí)例(一)

    摘要：接收一個(gè)屬性，這個(gè)組件會(huì)讓后代組件統(tǒng)一提供這個(gè)變量值。因此對(duì)于同一個(gè)對(duì)象而言，一定是后代元素。解決方法就是把內(nèi)聯(lián)函數(shù)提取出來(lái)，如下講了這么多，我們還沒(méi)有講到其實(shí)我們已經(jīng)講完了的工作原理了。 本節(jié)主要講解以下幾個(gè)新的特性： Context ContextType lazy Suspense 錯(cuò)誤邊界（Error boundaries） memo 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博...

    Betta 評(píng)論0 收藏0

  • React 深入系列7：React 常用模式

    摘要：本篇是深入系列的最后一篇，將介紹開(kāi)發(fā)應(yīng)用時(shí)，經(jīng)常用到的模式，這些模式并非都有官方名稱，所以有些模式的命名并不一定準(zhǔn)確，請(qǐng)讀者主要關(guān)注模式的內(nèi)容。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。 本篇是React深入系列的最后一篇，將介紹開(kāi)發(fā)React應(yīng)用時(shí)，經(jīng)常用到的模式，這些模式并非都有...

    Chao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<