mercredi 6 novembre 2019

Reference error when trying to access a variable defined inside a constructor in react-native

I need to implement a checkbox component in react-native which should work in both ios and android. I tried using CheckBox component of react-native, but it doesn't work in ios. So, I took the below code from a website,

import React, { Component } from 'react';

import { Alert, Image, Platform, StyleSheet, Text, TouchableHighlight, View } from 'react-native';

import PropTypes from 'prop-types';

class Selected_Items_Array {
  constructor() {
    selectedItemsArray = [];
  }

  pushItem(option) {
    selectedItemsArray.push(option);
  }

  getArray() {
    return selectedItemsArray;
  }
}

class Checkbox extends Component {

  constructor() {

    super();

    this.state = { checked: null }
  }

  componentWillMount() {

    if (this.props.checked) {
      this.setState({ checked: true }, () => {
        this.props.selectedArrayObject.pushItem({
          'key': this.props.keyValue,
          'label': this.props.label,
          'value': this.props.value
        });
      });
    }
    else {
      this.setState({ checked: false });
    }
  }

  toggleState(key, label, value) {
    this.setState({ checked: !this.state.checked }, () => {
      if (this.state.checked) {
        this.props.selectedArrayObject.pushItem({ 'key': key, 'label': label, 'value': value });
      }
      else {
        this.props.selectedArrayObject.getArray().splice(this.props.selectedArrayObject.getArray().findIndex(x => x.key == key), 1);
      }
    });
  }

  render() {
    return (

      <TouchableHighlight
        onPress={this.toggleState.bind(this, this.props.keyValue, this.props.label, this.props.value)}
        underlayColor="transparent"
        style=>

        <View style=>

          <View style=>
            {
              (this.state.checked)
                ?
                (<View style={styles.checkedView}>
                  <Image source={require('./assets/check.png')} style={styles.checkBoxImage} />
                </View>)
                :
                (<View style={styles.uncheckedView} />)
            }

          </View>

          <Text style={[styles.checkBoxLabelText, { color: this.props.labelColor }]}>{this.props.label}</Text>

        </View>

      </TouchableHighlight>
    );
  }
}

export default class App extends Component {

  constructor() {

    super();

    selectedArrayOBJ = new Selected_Items_Array();
    this.state = { selectedItems: '' }

  }

  getSelectedItems = () => {

    if (selectedArrayOBJ.getArray().length == 0) {

      Alert.alert('No Items Selected!');
    }
    else {
      // console.log(selectedArrayOBJ.getArray().map(item => item.label).join());
      this.setState(() => {
        return {
          selectedItems: selectedArrayOBJ.getArray().map(item => item.value).join()
        }
      });
    }
  }

  render() {
    return (
      <View style={styles.MainContainer}>

        <Checkbox size={30}
          keyValue={1}
          selectedArrayObject={selectedArrayOBJ}
          checked={true}
          color="#0091EA"
          labelColor="#0091EA"
          label="Item #1"
          value="item_1" />

        <Checkbox size={35}
          keyValue={2}
          selectedArrayObject={selectedArrayOBJ}
          checked={true}
          color="#1B5E20"
          labelColor="#1B5E20"
          label="Item #2"
          value="item_2" />

        <Checkbox size={40}
          keyValue={3}
          selectedArrayObject={selectedArrayOBJ}
          checked={true}
          color="#FF6F00"
          labelColor="#FF6F00"
          label="Item #3"
          value="item_3" />

        <TouchableHighlight underlayColor="#000" style={styles.selectedItemsButton} onPress={this.getSelectedItems}>

          <Text style={styles.selectedItemsButton_Text}>Get Selected Items</Text>

        </TouchableHighlight>

        <Text style=> {this.state.selectedItems} </Text>

      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    MainContainer:
    {
      paddingTop: (Platform.OS === 'ios') ? 20 : 0,
      flex: 1,
      padding: 20,
      justifyContent: 'center',
      alignItems: 'center'
    },

    selectedItemsButton:
    {
      marginTop: 25,
      padding: 8,
      backgroundColor: '#2962FF',
      alignSelf: 'stretch'
    },

    selectedItemsButton_Text:
    {
      color: 'white',
      textAlign: 'center',
      alignSelf: 'stretch',
      fontSize: 18
    },

    checkedView:
    {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    },

    checkBoxImage:
    {
      height: '80%',
      width: '80%',
      tintColor: 'white',
      resizeMode: 'contain'
    },

    uncheckedView:
    {
      flex: 1,
      backgroundColor: 'white'
    },

    checkBoxLabelText:
    {
      fontSize: 16,
      paddingLeft: 10
    }
  });

Checkbox.propTypes =
  {
    size: PropTypes.number,
    keyValue: PropTypes.number.isRequired,
    selectedArrayObject: PropTypes.object.isRequired,
    color: PropTypes.string,
    label: PropTypes.string,
    labelColor: PropTypes.string,
    value: PropTypes.string,
    checked: PropTypes.bool
  }

Checkbox.defaultProps =
  {
    size: 30,
    color: '#636c72',
    labelColor: '636c72',
    label: 'Default',
    checked: false,
    value: 'Default'
  }

I pasted the above code in App.js in Code Sandbox project, but it's throwing a Reference error that selectedItemsArray is not defined. Can someone please tell me why it's throwing this error and how can I resolve it. Thanks.




Aucun commentaire:

Enregistrer un commentaire