toystars / react-native-multiple-select

Simple multi-select component for react-native
MIT License
565 stars 313 forks source link

Cannot read the property 'getSelectedItemsExt' of undefined #62

Closed ghost closed 6 years ago

ghost commented 6 years ago

I am building an App and referring this link i implemented same code for my App, but i am getting error "Cannot read the property 'getSelectedItemsExt' of undefined". One more error is "submit" button is also not showing up. I have tried all the ways but failed.

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput, View, ListView, Alert, Button,     Platform, ToastAndroid, TouchableOpacity, ActivityIndicator, Text, Picker, ScrollView }
from 'react-native';
import { StackNavigator } from 'react-navigation';
import MultiSelect from 'react-native-multiple-select';

class manage_publishers extends Component {
static navigationOptions = {
    title: 'Manage Publishers',
};

constructor() {
    super()
    this.state = {
        isLoading: true,
        selectedPublishers1:[],
        publishersByCategory: [],
        publishersByClient: [],
        publishersByGroup: [],
        dataSource:[]
    }
}

componentDidMount() 
{
    const base64 = require('base-64');
    fetch('APIURL'+this.props.navigation.state.params.id, 
    {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            "Authorization": "Basic " + base64.encode("ABC:XYZ")
        }
    }).then((response) => response.json()
    )
        .then((responseJson) => {
            this.setState({
                categories: responseJson.PublisherByCategory,
            }, function () {

        });
    })
    .catch((error) => {
        console.log("error in category");
        console.log(error);
    });

}

onSelectedPublishersByCategoryChange = (publishersByCategory) => {
    console.log(publishersByCategory);
    this.setState({ publishersByCategory });
}

render() {
    const { navigate } = this.props.navigation;
    if (this.state.isLoading) {
    return (
    <View style={{ flex: 1, paddingTop: 20 }}>
      <ActivityIndicator />
    </View>
  );
}
return ([
  <View style={{flex: 1,paddingTop: (Platform.OS === 'ios') ? 20 : 20, padding: 5}}>
    <Text style={{ padding: 5, fontSize: 35, backgroundColor: '#2196F3', marginBottom: 7 }}>
        Manage Publishers
    </Text>
    <MultiSelect
      items={this.state.categories}
      uniqueKey="id"
      ref={(component) => { this.multiSelect = component }}
      onSelectedItemsChange={this.onSelectedPublishersByCategoryChange}
      selectedItems={this.state.publishersByCategory}
      selectText="Publishers by Category"
      searchInputPlaceholderText="Search Publisher..."
      onChangeInput={ (text)=> console.log(text)}
      altFontFamily="ProximaNova-Light"
      tagRemoveIconColor="#CCC"
      tagBorderColor="#CCC"
      tagTextColor="#CCC"
      selectedItemTextColor="#CCC"
      selectedItemIconColor="#CCC"
      itemTextColor="#000"
      displayKey="name"
      searchInputStyle={{ color: '#CCC' }}
      submitButtonColor="#CCC"
      submitButtonText="Submit"
    />
  </View>,
  <View>
     {this.multiSelect.getSelectedItemsExt(selectedItems)} 
  </View>
 ]);
}
}
});

 module.exports = manage_publishers;

Please have a look at this and provide me solution, I'll be very thankful .

muttonblue commented 6 years ago

I am having the same issue #58

toystars commented 6 years ago

@khushboogupta1 please refer to issue #58 for a solution to this.