[英]How to implement checkbox in FlatList React Native
I'm trying to implement a checkbox while fetching the data API from the backend but the issue that I encountered is that all the checkbox are checked and I'm unable to uncheck it and also how can I pass the selected checked checkbox as a param to the next component.我正在尝试在从后端获取数据 API 时实现一个复选框,但我遇到的问题是所有复选框都已选中,我无法取消选中它,以及如何将选中的复选框作为参数传递到下一个组件。 I hope I could get some help.
我希望我能得到一些帮助。
This is what I have in my current codes;这就是我当前代码中的内容;
class Gifts extends Component {
constructor(props){
super(props);
this.state={
users:'',
checked: {},
selected: 0
}
}
API code for handle checkbox API 手柄复选框代码
handleChange = (index) => {
let { checked } = this.state;
checked[index] = !checked[index];
this.setState({ checked });
}
onPress(value) {
this.setState({ selected: value });
}
render() {
let { navigation } = this.props
return (
<SafeAreaView style={{flex:1 }}>
<View style={{ flex:1,justifyContent: 'center'}}>
//...codes..//
<View style={styles.userlist}>
<FlatList
data={this.state.users}
keyExtractor={(item ,index) => index.toString()}
renderItem={({ item }) => (
<FlatList
data={item.friendList}
renderItem={({ item }) =>
<View style= {{flexDirection:'row', justifyContent:'space-between'}}>
<Text style={{marginTop:20, marginLeft:10, fontSize: 20}}>{item.name}</Text>
<CheckBox
center
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={this.state.checked}
value={ this.state.checked[item.flag]}
onPress={this.onPress}
/>
</View>
}
keyExtractor={(item ,index) => index.toString()}
ItemSeparatorComponent ={this.ItemSeparator}
/>
)}
/>
</View>
<Button
rounded
// disabled={true}
//onPress={}
style={{width: 100, justifyContent: 'center',marginLeft:150}}
>
<Text>Send</Text>
</Button>
</View>
</SafeAreaView>
);
}
}
The problem with your code is that you use a single this.state.checked
for all your checkboxes, it's very hard to manipulate.您的代码的问题是您对所有复选框都使用了一个
this.state.checked
,这很难操作。
A more simple way is to integrate the flag checked
(and its value) in your looped FlatList data, in your exemple you'll have something like: this.state.users[i].friendList[j].checked = true/false
一种更简单的方法是将
checked
的标志(及其值)集成到循环的 FlatList 数据中,在您的示例中,您将拥有类似: this.state.users[i].friendList[j].checked = true/false
So for every element you can control the value of checked.因此,对于每个元素,您都可以控制选中的值。 You have to change your onPress function to setState the element checked/unchecked
您必须将 onPress function 更改为 setState 元素已选中/未选中
Edit solution could be:编辑解决方案可能是:
onPress function (you have also to initialise your users object with checked=false
for every friend): onPress function (您还必须为每个朋友初始化您的用户 object 并
checked=false
):
onPress(indexUser, indexFriend, value) {
const { users } = this.state;
for (let i = 0; i < users.length; i++) {
if (i === indexUser) {
for (let j = 0; j < users[i].friendList.length; j++) {
if (j === indexFriend) {
const bool = users[i].friendList[j].checked;
users[i].friendList[j].checked = !bool;
users[i].friendList[j].value = value;
}
}
}
}
this.setState({ users });
}
Checkbox component (you have nested flatlist, maybe you could do some refactoring):复选框组件(你有嵌套的平面列表,也许你可以做一些重构):
<CheckBox
center
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={item.checked}
value={item.value}
onPress={()=>{ this.onPress(indexUser, indexFriend, value) }}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.