jeudi 9 mai 2019

How to find the value of the checkboxes ticked while using react-native-elements checkbox in react-native?

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