React Native 获取 Flatlist 索引
React Native Get Flatlist Index
我在 flatlist 中使用 flatlist,我想获取我使用的第一个 flatlist 的索引
代码如下:
<FlatList
data ={this.state.data}
renderItem = {(item, index1)=>
<View>
<FlatList
data = {this.state.data2}
renderItem = {(item, index2) =>
console.log("parent_index",index1);
console.log("child_index",index2);
}
/>
</View>
}
如何获取index1?
我在上面的代码中所做的是未定义的。
您需要 onPress 将获取索引的处理程序,例如:
onPress={()=>this.getItem(索引)}
和处理程序:
getItem=index=>this.setState(prevState=>({selectedByIndex:[index, ...prevState.selectedByIndex]})
你应该使用 FlatList 的 keyExtractor 属性。
<FlatList
data ={this.state.data}
keyExtractor={(item, index) => index}
renderItem = {(item, index)=>
<View>
<FlatList
data = {this.state.data2}
renderItem = {(item, index) =>
console.log("parent_index",index);
}
/>
</View>
}
第一个平面列表的代码
render() {
return (
<View style={{ height: "100%", width: "100%", backgroundColor: 'red' }}>
<FlatList
data={this.state.data}
renderItem={({ item, index }) => {
return (
this.renderSecondFlatlist(index)
);
}
}
/>
</View>
)
}
第二个 flatList 的代码,您将在其中传递第一个 FlatList
的 "index"
renderSecondFlatlist(index1) {
return (
<View style={{ flex: 1, backgroundColor: 'pink' }}>
<FlatList
data={this.state.data2}
renderItem={(item, index2) => {
/*return (
<Text>{index1}</Text>
);*/
console.log("index:-",index1);
}
}
/>
</View>
);
}
我在 flatlist 中使用 flatlist,我想获取我使用的第一个 flatlist 的索引
代码如下:
<FlatList
data ={this.state.data}
renderItem = {(item, index1)=>
<View>
<FlatList
data = {this.state.data2}
renderItem = {(item, index2) =>
console.log("parent_index",index1);
console.log("child_index",index2);
}
/>
</View>
}
如何获取index1?
我在上面的代码中所做的是未定义的。
您需要 onPress 将获取索引的处理程序,例如:
onPress={()=>this.getItem(索引)} 和处理程序:
getItem=index=>this.setState(prevState=>({selectedByIndex:[index, ...prevState.selectedByIndex]})
你应该使用 FlatList 的 keyExtractor 属性。
<FlatList
data ={this.state.data}
keyExtractor={(item, index) => index}
renderItem = {(item, index)=>
<View>
<FlatList
data = {this.state.data2}
renderItem = {(item, index) =>
console.log("parent_index",index);
}
/>
</View>
}
第一个平面列表的代码
render() {
return (
<View style={{ height: "100%", width: "100%", backgroundColor: 'red' }}>
<FlatList
data={this.state.data}
renderItem={({ item, index }) => {
return (
this.renderSecondFlatlist(index)
);
}
}
/>
</View>
)
}
第二个 flatList 的代码,您将在其中传递第一个 FlatList
的 "index" renderSecondFlatlist(index1) {
return (
<View style={{ flex: 1, backgroundColor: 'pink' }}>
<FlatList
data={this.state.data2}
renderItem={(item, index2) => {
/*return (
<Text>{index1}</Text>
);*/
console.log("index:-",index1);
}
}
/>
</View>
);
}