Home > Web Front-end > JS Tutorial > body text

The child component calls the method instance of the parent component

小云云
Release: 2018-02-24 09:04:08
Original
1866 people have browsed it

For some purposes, I recently started to study RN again. While watching the tutorials to learn step by step, I recently encountered a problem, that is, the problem of method invocation of parent-child components. I have been asking this question on Baidu for a long time. Under the ES6 syntax of JS, when creating a component using class, the sub-component calls the method of the parent component and the simulator keeps reporting errors. This article mainly shares with you a method for subcomponents to call parent components under ES6. Hope it helps everyone.

Because the video I watched is code based on es5 syntax, so the syntax is somewhat different.

Under the syntax of es5, the this of the method has been handled by RN for us, so the effect can be achieved according to the example in the video, but it seems that es6 needs to be written by ourselves. .

The specific way to write it is to add this.xxxxx = this.xxxxx.bind(this);

or write this.xxxxx.bind(this) when binding the subcomponent ) .

I won’t go into details here, but the code is given below for reference by those who need it.

export default class TestPrj extends Component {
    constructor(props){
      super(props);
      this.timesReset = this.timesReset.bind(this);
      this.state = {timex:2};
    }
    timesReset(){
      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};
  }
  componentWillReceiveProps(props){
    console.log(this.props);
    this.setState({
      times:props.timex
    })
  }
  timesReset(){
    this.props.timesReset();
  }
  render(){
    return(
    <View style={styles.container}>
      <Text style={styles.instructions}>
      儿子:虽然你揍了我 {this.state.times} 次,但是我 永 不 屈 服!!
      </Text>
      <TouchableHighlight style={styles.btn} underlayColor={&#39;pink&#39;} onPress={this.timesReset.bind(this)}>
        <Text style={{textAlign:&#39;center&#39;}}>爹,再给你儿子一次机会!!</Text>
      </TouchableHighlight>
    </View>
    );
  }
}
Copy after login

Related recommendations:

Vuejs2.0 child component calls the method of the parent component

vue uses ref to let the parent component Call the subcomponent instance

Vue2.0 about the event emission and reception between the parent component and the subcomponent

The above is the detailed content of The child component calls the method instance of the parent component. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!