React-父子元件傳值-子傳父

1.直接上程式碼：

			class Children extends React.Component {
				constructor(props){
					super(props);
					this.state={
						msg:'我是子元件',
						pmsg:this.props.pmsg
					}
				}
				send(){
					this.props.handle(this.state.msg);   //利用父元件傳進來的回撥函式改變父元件內的state值，從而實現子到父元件的資料傳遞
				}
				render(){
					return (
						<div className='children'>
							<h1>{this.state.msg}</h1>
							<p>{this.state.pmsg}</p>
							<button onClick={(e)=>{this.send(e)}}>點擊發送資料到父元件</button>
						</div>
					)
				}
			}
			
			class Parent extends React.Component {
				constructor(props){
					super(props);
					this.state={
						msg:'我是父元件的資料',
						cmsg:''
					}
				}
				changeMsg(data){
					this.setState({
						cmsg:data
					})
					console.log(data);
				}
				render(){
					return (
						<div className='parent'>
							<h1>{this.state.msg}</h1>
							<p>{this.state.cmsg}</p>
							<Children handle={(data)=>{this.changeMsg(data)}} pmsg={this.state.msg} />
						</div>
					)
				}
			}
			ReactDOM.render(
				<Parent />,
				document.getElementById('app')
			)
 

將父元件內的方法，通過子元件的自定義屬性的方式傳入，如上：handle={(data)={this.changeMsg(data)}}

在子元件中，通過在方法內使用this.props.handle(data);將子元件內的資料作為引數傳入該回調函式，從而實現子傳父的實現。