React Native 子元件傳遞State給父元件

一.原理

React本身是單向資料流，父元件可以傳遞props給子元件。
那麼假如要實現React / ReactNative 中父子元件通訊間的雙向資料流，思路可以是在這樣：

1. 父元件向子元件傳遞props，其中props中帶有子元件的初始化資料以及回撥方法
2. 子元件手動觸發父函式傳遞進來的回撥方法，同時時將子元件的資料傳遞回去
   
   PS.使用 props 來傳遞事件，並通過回撥的方式實現，這樣的實現其實不是特別好，但在沒有任何工具(redux)的情況下不失為一種簡單的實現方式

二.程式碼演示

[email protected]

0.56,使用ES6語法，優先使用箭頭函式

父元件

export default class Parent extends Component{
    //初始狀態
    constructor(props) {
        super(props);
        this.state = {
          stateName:'parent',
        };
    };
    //回撥函式：將傳來的引數用this.setState方法修改初始狀態值
    updateState (data) {              //這個data是個引數
        this
 
.setState(data);
    }
    render(){
        return <Child   
                stateName={this.state.stateName}  //將父元件的stateName傳給子元件
                updateParentState={this.updateState.bind(this)} //繫結父元件的updateState方法中的this
                />
    }
}

子元件|Es6

    const Child =(props)=>{
        const
 
 {stateName} = props; //即stateName=props.stateName，取出傳遞進來的props中的stateName 
        //
        setParentState=(data)=>{
            props.updateParentState(data);
        }
        return(
            <View>
                <Text 
                    //這裡要注意的是，返回的引數必須是一個物件，所以要用{}括起來，而不是括號()
                    onPress={() => {this.setParentState(  {stateName: 'child'}  )} }
                >我的狀態是{stateName}</Text>
            </View>
        )
    }

三.附錄