react子傳父

react裏子組件不能直接操做父組件的數據。

因此要從父組件傳遞一個方法給子組件，

子組件獲取到該方法後，把子數據傳入該方法，

父組件才能獲取到子數據

例子：

子組件 Child.js

import React, { Component } from 'react'
class Child extends Component{
    constructor(props){
        super(props)
        this.state = {
            cdata:"子組件數據"
        }
    }
    render(){
        return(
            <div>
                <button onClick={this.trans.bind(this,this.state.cdata)}>肯定</button>
            </div>
        )
    }

    //點擊子組件時，定義一個方法，調用父組件傳過來的方法，把子組件數據傳入到這個方法裏
    trans(data){
        this.props.content(data)
    }
}
export default Child;

 

父組件App.js

import React, { Component } from 'react';
import Child from './Child'
class App extends Component{
  constructor(props){
    super(props)
    this.state = {
      pdata:"父組件數據"
    }
  }
  render(){
    return(
      <div>
        {/* 傳遞一個方法給子組件 */}
        <Child content={this.getValue.bind(this)}></Child>
        {this.state.pdata}
      </div>
    )
  }

  //在方法裏傳入一個參數，val就是子組件傳過來的數據
  getValue(val){
    this.setState({
      pdata:val
    })
  }
}
export default App;