[英]How to pass props from FlatList item to Modal?
I have implemented a View component containing a FlatList, which renders TouchableHighlights. 我实现了一个包含FlatList的View组件,它呈现了TouchableHighlights。 Also I have implemented a Modal component, which I'd like to import at various places including the component that renders the FlatList. 我还实现了一个Modal组件,我想在各个地方导入它,包括呈现FlatList的组件。
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"). 我已经设法从外部打开模态(通过移交支柱以获得可见性,通过nextProps访问它并将模态状态值“modalVisible”设置为此)并从内部关闭它(只需通过更改它的状态值“modalVisible”) 。
BUT: I also want to pass data to the modal from each FlatLists item. 但是:我还想将数据传递给每个FlatLists项目的模态。 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). 呈现为TouchableHighlight的项目应打开模式onPress,模式应包含项目中的数据(在下面的代码中,这将是项目ID)。 How can I achieve passing data to the modal? 如何将数据传递给模态? I somehow can't get it to work using nextProps. 我不知道怎么用nextProps才能让它工作。 This seems more to be an issue related to setting state from within a FlatLists item rather than the Modal. 这似乎更像是一个与FlatLists项而不是Modal中设置状态相关的问题。
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 rendering TouchableHighlights: FlatList渲染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>
)
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.