如何将道具从 FlatList 项目传递给 Modal? [英] How to pass props from FlatList item to Modal?

问题描述

我已经实现了一个包含 FlatList 的 View 组件，它呈现 TouchableHighlights.此外，我还实现了一个 Modal 组件，我想在各个地方导入它，包括呈现 FlatList 的组件.

I have implemented a View component containing a FlatList, which renders TouchableHighlights. Also I have implemented a Modal component, which I'd like to import at various places including the component that renders the FlatList.

我已经设法从外部打开模态(通过移交一个可见性的道具，通过 nextProps 访问它并将模态状态值modalVisible"设置为此)并从内部关闭它(简单地通过改变它的状态值"modalVisible").

I have already managed to open the modal from outside (via handing over a prop for visibility, accessing it via nextProps and setting modals state value "modalVisible" to this) and closing it from inside (simply via changing it's state value "modalVisible").

但是:我还想将数据从每个 FlatLists 项目传递到模态.呈现为 TouchableHighlight 的项目应该打开模态 onPress 并且模态应该包含来自项目的数据(在下面的代码中，这将是项目 ID).如何实现向模态传递数据?我以某种方式无法使用 nextProps 使其工作.这似乎更像是一个与从 FlatLists 项目而不是 Modal 设置状态相关的问题.

BUT: I also want to pass data to the modal from each FlatLists item. An item rendered as a TouchableHighlight should open the modal onPress and the modal should contain data from the item (in the code below this would be the items id). How can I achieve passing data to the modal? I somehow can't get it to work using nextProps. This seems more to be an issue related to setting state from within a FlatLists item rather than the Modal.

模态:

export default class ModalView extends React.Component {
constructor() {
  super();
  this.state = {
    modalVisible: false,
    id: null,
  };
}

componentWillReceiveProps(nextProps) {
  this.setState({
    modalVisible: nextProps.modalVisible,
    id: nextProps.id,
  })
}

render() {
  return (
     <Modal
      animationType="slide"
      transparent={ true }
      visible={ this.state.modalVisible }
      onRequestClose={() => { this.props.setModalVisible(false) }}
     > 
       <View>
         <View>
          <Text>{ this.state.id }</Text>
          <TouchableHighlight
            onPress={() => { this.props.setModalVisible(false) }}
          > 
            <Text>Hide Modal</Text>
          </TouchableHighlight>
         </View>
       </View>
     </Modal>
  )
}
}

FlatList 渲染 TouchableHighlights:

FlatList rendering TouchableHighlights:

export default class RecentList extends React.Component {
constructor() {
  super();
  this.state = {
    modalVisible: false,
    id: null,
  }
}

_onPressItem(id) {
  this.setState({
    modalVisible: true,
    id: id,
  });
};

_renderItem = ({item}) => {
  return (
    <TouchableHighlight
      id={item.id}
      onPress={this._onPressItem}
    >
      <View>
        <Text>{id}</Text>
      </View>
    </TouchableHighlight>
  )
};

render() {
  let data = realm.objects('Example').filtered('completed = true')
             .sorted('startedAt', true).slice(0, 10)
  return (
    <View>
      <ModalView
        modalVisible={ this.state.modalVisible }
        setModalVisible={ (vis) => { this.setModalVisible(vis) }}
        id={ this.state.id }
      />
      <FlatList
        data={data}
        renderItem={this._renderItem}
        keyExtractor={(item, index) => index}
      />
    </View>
  )
}
}

推荐答案

你错过的一个小错误......

A small mistake you have missed ...

_renderItem = ({item}) => {
  return (
    <TouchableHighlight
      id={item.id}
      onPress={() => this._onPressItem(item.id)} // Your not sending the item.id
    >
      <View>
        <Text>{id}</Text>
      </View>
    </TouchableHighlight>
  )
};

这篇关于如何将道具从 FlatList 项目传递给 Modal?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！