react子元件怎麼傳值給父元件？-js教程-PHP中文網

react子元件怎麼傳值給父元件？

青灯夜游

發布： 2020-11-30 15:56:16

原創

13742 人瀏覽過

react子元件傳送值至父元件的方法：在父元件中設定state的初始值以及處理該state的函數，同時將函數名稱透過以props屬性值的形式傳入子元件，子元件透過呼叫父元件的函數，進而引起state變化，達到在父元件中展示子元件所產生的變化。

react子元件怎麼傳值給父元件？

本教學操作環境：windows7系統、React16版，此方法適用於所有品牌電腦。

相關推薦：《React影片教學》

子元件需要控制自己的state，然後告訴父元件自己的state，透過props呼叫父元件中用來控制state的函數，在父元件中展示子元件的state變化。

/***实现在输入框输入邮箱时，在p中即时显示输入内容***/


<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: &#39;&#39;
    }
  },
  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(&#39;test&#39;)
);

登入後複製

原理：

依賴props 來傳遞事件的引用，並透過回呼的方式來實現的，這樣實作不是特別好，但在沒有任何工具的情況下都是一種簡單的實作方式。

分析：

React中當state發生改變時，元件才會update。在父元件中設定state的初始值以及處理該state的函數，同時將函數名稱透過以props屬性值的形式傳入子元件，子元件透過呼叫父元件的函數，進而引起state變化，達到在父組件中展示子組件產生的變化。

更多程式相關知識，請造訪：程式設計影片課程！！

以上是react子元件怎麼傳值給父元件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！