Javascript 如何在React Native中获得从子组件到父组件的回调

我一直在使用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.log("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>
    );

  }
}

当在单个文件中声明时，此代码可以正常工作，但当在两个不同的文件中分离时，会出现一个错误，说明此.props.\u onPressItem在点击单元格时未定义

我遵循了以下方法，但也没有成功

---

任何建议都会很有帮助。

快速查看了您的代码。这就是我发现的

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>
    );

  }
}

---

快速查看您的代码。这就是我发现的

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}

---

您的道具称为onPressItem，不带下划线

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

…您应该将函数本身传递给组件onPress方法，而不是返回值。我也是

      onPress={() => this._onPress}

…而不是

      onPress={this._onPress}

你可以这样用 此代码适用于您的父组件

class ParentComponent extends Component {
    onPressButtonChildren(data){
      console.log(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

你可以这样用 此代码适用于您的父组件

class ParentComponent extends Component {
    onPressButtonChildren(data){
      console.log(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