Question

我将一个FlatList和一个ListItem一起呈现，以便特定行的onPress可以在ListTrips组件中获取该数据。如下所示在我的控制台中。警告将打印所选项目的数据。

组件A

 import Component B from ...
 ....
  toggleModalConfirmTrip = item => {
console.warn(item);
// this.props.navigation.navigate('SelectedTrip', { item });

if (this.ModalConfirmTrip) {
  this.ModalConfirmTrip.toggleModal();
}
};


 <ListItem
 onPress={() => this.toggleModalConfirmTrip(item)}
 ....

但是在我的ModalConfirmTrip.js内部，我无法访问该项目。我的问题是如何在组件B中访问它？我曾尝试过使用道具和状态，但似乎无法正确处理。

组件B

export default class ModalConfirmTrip extends Component {
constructor(props) {
super(props);
this.state = {
  locationFrom: '',
  locatonTo: '',
  isVisible: false,
  id: null,
 };
}

toggleModal = () => {
this.setState({ isVisible: !this.state.isVisible });
 };

// API Call to update trip to active



render() {
const { isVisible, item } = this.state;

console.warn('Modal', this.state);
console.warn(this.props);

return (
  <View style={styles.container}>
    <Modal
      onBackdropPress={() => {
        this.toggleModal();
      }}
      isVisible={isVisible}
      hideModalContentWhileAnimating
    >
      <View style={styles.modalViewContainer}>
        <Text style={styles.title}>{this.state.item}</Text>

Answer 1

找到了解决方案！

因此您必须将物料作为道具传递给组件A

undefined

还要注意，您不能传递数组的对象，所以我刚刚传递了旅程的ID。希望这对某人有帮助。

反应从父模式到子模式的本机传递数据

1 个答案: