I want to find out all the names whose checkboxes are ticked. I'm using checkbox of react-native-elements. I'm working with the condition that maximum 4 elements needs to be checked and minimum 1.
Maybe it's a trivial question but I'm new to react-native and I have searched all over the net but couldn't come to a solution.
Sharing my code for the reference:
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, ScrollView, FlatList,
Alert } from 'react-native';
import { CheckBox } from 'react-native-elements'
class Categories extends Component{
state = {
enabled: false,
checked:[],
len: 0,
names: [],
data : [
{ "name": "Bagels",},
{ "name": "Bakery",},
{ "name": "Bar",},
{ "name": "Barns"},
{ "name": "Barcades"},
{ "name": "Beach",},
{ "name": "Beach Bar",},
{ "name": "Bistro",},
{ "name": "Brewery",},
{ "name": "Cafe",},
{ "name": "Comedy Clubs"},
{ "name": "Country Clubs"},
{ "name": "Co-Working Space"},
{ "name": "Dessert / Pastry",},
]
};
componentWillMount() {
let { data} = this.state;
let intialCheck = data.map(x => false);
this.setState({ checked: intialCheck })
}
handleChange = (index, name) => {
let checked = [...this.state.checked];
checked[index] = !checked[index];
this.setState({ checked });
if(checked[index] === true){
this.setState((prevState) => ({
len: prevState.len + 1
}), () => {
if(this.state.len >=1 ){
this.setState({enabled: true,})
}
if(this.state.len > 4){
checked[index] = false;
this.setState({checked, len: 4,}, () =>{
Alert.alert("Warning","You can't select more than 4
categories!");
});
}
})
}
if(checked[index] === false){
len: prevState.len - 1,
}), () => {
if(this.state.len <1){
this.setState({enabled: false})
}
})
}
}
render(){
let { data, checked } = this.state;
return(
<View style=>
<View style=>
<Text>Categories</Text>
<ScrollView>
<FlatList
data={data}
extraData={this.state}
renderItem={({ item, index }) =>
<CheckBox
title={item.name}
checkedIcon='circle'
uncheckedIcon='circle'
checkedColor='#DD9FDB'
uncheckedColor='#D8D8D8'
onPress={() => this.handleChange(index,
item.name)}
checked={checked[index]}
size={15}
/>
}
/>
</ScrollView>
</View>
</View>
);
}
}
I want to know which all names have been clicked.
Thanks for all the help!
Aucun commentaire:
Enregistrer un commentaire