React父子元件間的傳值
阿新 • • 發佈:2018-12-21
父元件:
import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"預設值0", txt1:"預設值1" } } componentDidMount(){ } parToson(){ this.setState({ txt0:"哈哈哈哈" }) } sonToPar(e){ this.setState({ txt1:e }) } render(){ const style={ paddingLeft:"150px" } return( <div style={style}> <button onClick={this.parToson.bind(this)}>傳值給子元件</button> <div>接受子元件的傳值為:{this.state.txt1}</div> <br/> <Child message={this.state.txt0} getsonToPar={this.sonToPar.bind(this)}/> </div> ) } }
子元件:
import React, { Component } from 'react'; class child extends Component{ constructor(props) { super(props); this.state = { msg:"啦啦啦啦" } } componentDidMount(){ } render(){ return( <div> <div>接受父元件傳的值為:{this.props.message}</div> <button onClick={()=>this.props.getsonToPar(this.state.msg)}>傳值給父元件</button> </div> ) } } export default child;