ReactNative Progression (26) : A child component calls a function in the parent component

demand

When a child component performs an operation, it needs to call a function in the parent component or change a parameter in the parent component. The implementation is as follows:

Child components

export default class Child extends PureComponent {
  static propTypes = {
    onItemClick: React.PropTypes.func,
  }
  info = 'Contents of child Components';
  itemClick(index) {
     //You can pass something from a child component to a parent componentif (this.props.onItemClick) {
       this.props.onItemClick(index);
     }
  }
  render(){
      return(
      <TouchableOpacity
            onPress={() => { this.itemClick(this.index); }} style={styles.touchItem} > <Text > Click to modify the parent component </Text> </TouchableOpacity>); }}Copy the code

The parent component

export default class Father extends PureComponent {
  _onItemClick(info) {
  	console.log('You called the parent component's method.')
       //Display index or change the parameters in the parent component with the parameters in the child componentconsole.log(info);
  }
 render(){
      return(
         <Child
             onItemClick={this. _onItemClick}); } / >Copy the code