react子組件如何向父組件傳值

發(fā)布時(shí)間：2020-11-25 10:19:39 來(lái)源：億速云閱讀：213 作者：小新欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)react子組件如何向父組件傳值的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

react中，在父組件中設(shè)定state的初始值以及處理該state的函數(shù)，同時(shí)將函數(shù)名通過(guò)以props屬性值的形式傳入子組件，子組件通過(guò)調(diào)用父組件的函數(shù)，進(jìn)而引起state變化，達(dá)到在父組件中展示子組件產(chǎn)生的變化。

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

/***實(shí)現(xiàn)在輸入框輸入郵箱時(shí)，在p中即時(shí)顯示輸入內(nèi)容***/


<body>
  <p id="test"></p>
</body>

//子組件
var Child = React.createClass({
  render: function(){
    return (
      <p>
        郵箱：<input onChange={this.props.handleEmail}/>
      </p>
    )
  }
});

//父組件
var Parent = React.createClass({
  getInitialState: function(){
    return {
      email: ''
    }
  },
  handleEmail: function(event){
    this.setState({email: event.target.value});
  },
  render: function(){
    return (
      <p>
        <p>郵箱：{this.state.email}</p>
        <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
      </p>
    )
  }
});
React.render(
 <Parent />,
 document.getElementById('test')
);

原理：

依賴 props 來(lái)傳遞事件的引用，并通過(guò)回調(diào)的方式來(lái)實(shí)現(xiàn)的，這樣實(shí)現(xiàn)不是特別好，但在沒(méi)有任何工具的情況下是一種簡(jiǎn)單的實(shí)現(xiàn)方式。

分析：

React中當(dāng)state發(fā)生改變時(shí)，組件才會(huì)update。在父組件中設(shè)定state的初始值以及處理該state的函數(shù)，同時(shí)將函數(shù)名通過(guò)以props屬性值的形式傳入子組件，子組件通過(guò)調(diào)用父組件的函數(shù)，進(jìn)而引起state變化，達(dá)到在父組件中展示子組件產(chǎn)生的變化。

感謝各位的閱讀！關(guān)于react子組件如何向父組件傳值就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

react子組件如何向父組件傳值

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽