Как получить обратный вызов от дочернего компонента к родительскому компоненту в React Native

Я работаю над реакцией, чтобы получить обратный вызов от ребенка к родителю. Ниже приведен фрагмент кода моей реализации:

MainView.js

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableHighlight,
    FlatList,
    Dimensions,
} from 'react-native';
import ListCell from './ListCell';
import {displayAlert} from './CustomAlert';
type Props =  {
};

let winSize = Dimensions.get('window');
export default class MainView extends Component<Props> {

_keyExtractor = (item, index) => { return(index.toString());};

  _renderItem = ({item, index}) => {
    return (<ListCell
    item = {item}
    index = {index}
    onPressItem = {this._onPressItem}
    />);
  };
  _onPressItem = (item,index) => {
    console.info("Pressed row : "+index);
    displayAlert();
    // this.props.navigation.navigate('Detail',{item: item});
  };
    render() {
        return(
            <FlatList
        style = {styles.flatListStyle}
        data = {this.props.listing}
        keyExtractor = {this._keyExtractor}
        renderItem = {this._renderItem}
      />
        );
    }
}

Компонент ячейки списка для FlatList:

ListCell.js

import React, {PureComponent} from 'react';
import {
    StyleSheet,
    TouchableHighlight,
    View,
    Image,
    Text,
} from 'react-native'


export default class ListCell extends PureComponent {
  _onPress() {
    this.props._onPressItem(this.props.item,this.props.index);
  }
  render() {
    const item = this.props.item;
    const price = item.price_formatted.split(' ')[0];
    return (
      <TouchableHighlight
      style = {styles.listCellContainer}
      onPress = {this._onPress}
      underlayColor='#dddddd'>
        <View >
          <View style = {styles.rowContainer}>
            <Image style = {styles.thumb} source = {{uri:item.img_url}}/>
            <View style = {styles.textContainer}>
              <Text style = {styles.price}>{price}</Text>
              <Text style = {styles.title}>{item.title}</Text>
            </View>
          </View>
        </View>
      </TouchableHighlight>
    );

  }
}

этот код будет работать нормально, если он объявлен в одном файле, но при разделении в двух разных файлах он выдает ошибку, указывающую, что this.props._onPressItem не определено при нажатии на ячейку.

Я следовал следующему подходу https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17, но тоже не преуспел Любые предложения будут полезны.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
5 060
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Быстро просмотрел ваш код. Вот что я нашел.

export default class ListCell extends PureComponent {
  _onPress() {
    this.props.onPressItem(this.props.item,this.props.index); //Change: passing prop onPressItem and calling _onPressItem
  }
  render() {
    const item = this.props.item;
    const price = item.price_formatted.split(' ')[0];
    return (
      <TouchableHighlight
      style = {styles.listCellContainer}
      onPress = {this._onPress} //Try: Also bind the event () => this._onPress()
      underlayColor='#dddddd'>
        <View >
          <View style = {styles.rowContainer}>
            <Image style = {styles.thumb} source = {{uri:item.img_url}}/>
            <View style = {styles.textContainer}>
              <Text style = {styles.price}>{price}</Text>
              <Text style = {styles.title}>{item.title}</Text>
            </View>
          </View>
        </View>
      </TouchableHighlight>
    );

  }
}

Ваша опора называется onPressItem без подчеркивания.

    this.props.onPressItem(this.props.item, this.props.index);

... и вы должны передать саму функцию своим компонентам в метод onPress, а не возвращаемое значение. Ну действуй...

      onPress = {() => this._onPress}

...вместо...

      onPress = {this._onPress}

вы можете использовать вот так этот код для вашего родительского компонента

class ParentComponent extends Component {
    onPressButtonChildren(data){
      console.info(data)
      //press button chilldre  
    }
    render(){
      return(
        <ListChildren data = {this.props.data} fnPressButton = {this.onPressButtonChildren.bind(this)}/>
      )
    }
}

export default ParentComponent

это код для вашего дочернего компонента и кнопка нажатия ручки

const ListChildren = (props) => {
  const {price, title, image} = props.item
  const onPress = () => props.fnPressButton(props.item)
  return (
    <TouchableHighlight
      style = {styles.listCellContainer}
      onPress = {onPress} //Try: Also bind the event () => this._onPress()
      underlayColor = "#dddddd"
    >
      <View>
        <View style = {styles.rowContainer}>
          <Image style = {styles.thumb} source = {{ uri: img_url }} />
          <View style = {styles.textContainer}>
            <Text style = {styles.price}>{price}</Text>
            <Text style = {styles.title}>{title}</Text>
          </View>
        </View>
      </View>
    </TouchableHighlight>
  );
};

export default ListChildren

Другие вопросы по теме