---

2018-5-30

想不到這一篇文章居然有這麼多的閱讀量，既然如此我就來更正優化一下程式碼，也算是修一下之前的坑吧~

---

    es5的語法下，方法內的this指向都是RN已經幫我們處理好了的，所以按照視訊中的示例是可以達成效果的，但是es6貌似是要自己寫的。。  

    具體的寫法就是在constructor中新增 this.xxxxx = this.xxxxx.bind(this);  

    或者在子元件繫結的時候就寫this.xxxxx.bind(this) .

    推薦的話是使用箭頭函式，更簡單。

    下面上程式碼，以供需要的人蔘考。

export default class TestPrj extends Component {
        constructor(props){
            super(props);
            this.timesReset = this.timesReset.bind(this);
            this.state = {  timex:2  };
        }
        timesReset(){  // 這裡的函式是經過constructor中繫結過this的
            this.setState({
                timex:0
            });
        }
        render() {
            return(
                <View style={styles.container}>
                    <Son ref="Son1" timex={this.state.timex} timesReset={this.timesReset}/>
                    {/*或者<Son ref="Son1" timex={this.state.timex} timesReset={this.timesReset.bind(this)}/>*/}
                </View>


            );
        }
    }


  class Son extends Component{
    
    constructor(props){
        super(props);
        this.state = {times:this.props.timex};
    }
    // static getDerivedStateFromProps(nextProps, prevState) {  return { times: nextProps.timex };  } // -->此處是react16.3+的最新取代willReceiveProps的語法

    componentWillReceiveProps(props){
        console.log(this.props);
        this.setState({
            times:props.timex
        })
    }


    timesReset = () => { // 此處使用箭頭函式，避免bind繫結
        this.props.timesReset();
    }


    render(){
        return(
        <View style={styles.container}>
            <Text style={styles.instructions}>
            兒子：雖然你揍了我 {this.state.times} 次，但是我 永 不 屈 服！！
            </Text>
            <TouchableHighlight style={styles.btn} underlayColor={'pink'} onPress={this.timesReset}>
                <Text style={{textAlign:'center'}}>爹，我錯了</Text>
            </TouchableHighlight>
        </View>
        );
    }
}