reactjs - 反应原生 Flatlist 不取消选择 onPress
问题描述
我有一个可选择的平面列表。当用户触摸一行时,它会选择该特定项目并将该项目 id 存储在数组中。但是,当我尝试通过再次触摸所选项目来取消选择项目时,它不会取消选择并再次将其添加到数组中,但是如果我再次触摸它,它会从数组中删除该项目,但仍然不会取消选择。以下是我的平面列表代码:
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
FlatList,
List,
ListItem
} from 'react-native';
import {
Container,
Header,
Item,
Input,
Button,
StyleProvider,
Icon,
Body,
Right,
StatusBar,
Card,
CardItem,
CheckBox,
Left
} from 'native-base';
export default class UserList extends Component {
constructor(props) {
super(props);
const {params} = this.props.navigation.state;
this.state = {
data: [],
SelectedUserList: params.selectedUserID.slice(),
SelectedUserListName: [],
renderedListData: [],
IsInArray: true,
selectedUserID: params.selectedUserID,
IsSelected: (new Map(): Map<string, boolean>)
}
console.log("selectedUserID" + JSON.stringify(this.state.selectedUserID))
console.log("selectedCropName" + JSON.stringify(params.SelectedUserListName))
}
press = (hey) => {
console.log('Press:'+this.state.SelectedUserList)
this.state.renderedListData.map((item) => {
if (item.id === hey.id) {
item.check = !item.check
if (item.check === true) {
this.state.SelectedUserList.push(item.id);
this.state.SelectedUserListName.push(item.name);
console.log('selected:' + item.name);
console.log(this.state.SelectedUserListName.includes(item.id))
} else if (item.check === false) {
const i = this.state.SelectedUserList.indexOf(item)
const j = this.state.SelectedUserListName.indexOf(item)
if (1 != -1) {
this.state.SelectedUserList.splice(i, 1)
this.state.SelectedUserListName.splice(j, 1)
console.log('unselect:' + item.name)
return this.state.SelectedUserList
}
}
}
})
this.setState({data: this.state.data})
}
componentDidMount() {
//Fetch Data From API
...
}
render() {
return (
<View style={styles.container}>
<View style={styles.storyContainer}>
<FlatList data={this.state.renderedListData} keyExtractor={item => item.id.toString()}
extraData={this.state}
renderItem={({item}) => {
return <TouchableOpacity style={{
flexDirection: 'row',
padding: 2
}} onPress={() => {
this.press(item)
}}>
<View style={{
flex: 3,
alignItems: 'flex-start',
justifyContent: 'center'
}}>
{<Card
style={{
width: '100%',
height: 80,
alignItems: 'center'
}}>
<CardItem style={{height: '100%'}}>
<Left>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center'
}}>
<CheckBox checked={(this.state.selectedUserID.includes(item.id) || item.check ) ? true : false}
style={{marginRight: 15}}/>
<View>
<Text style={{
color: "#24466B",
fontSize: 16
}}>
{item.name}
</Text>
</View>
</View>
</Left>
</CardItem>
</Card>}
</View>
</TouchableOpacity>
}}/>
</View>
</View>
)
}
};
它将 SelectedUserList 定义为:
SelectedUserList: params.selectedUserID.slice()
因为当用户选择列表并单击 ok 时,它会将该数组推送到上一个屏幕,如果用户再次尝试重新选择,它会将数组推送到列表屏幕,并且先前选择的项目将自动在列表屏幕上重新选择。
onPress 以前工作正常,但是当我添加带状态的切片时,它停止取消选择。我添加了带有数组状态的切片,因为将状态设置为前一个屏幕上的状态
解决方案
中press
,我猜条件应该是i != -1
而不是1 != -1
。请检查一下。
推荐阅读
- java - 获取数据时动态传递文件名?硒-java
- ios - 查看 Apple 钥匙串内容
- javascript - javascript 中 Fetch 和 XMLHttpRequest 的问题
- sublimetext - 我应该如何在平面文件中找回丢失的代码?
- html - 将 HTML 文件上传到虚拟主机板时,为什么我的图像不显示?
- apache-spark - Pyspark 最可靠的验证列类型的方法
- android - 如何在 Xamarin.Forms 中录制视频
- perl - WWW::Mechanize::Chrome 如何关闭标签
- apache-camel - 如何在死信队列(amq)中应用过期消息
- php - 带有 PHP 和 SQLite 的数据库应用程序在数据库中返回 Null