Получение двух разных значений на State в реагировать на натив - PullRequest
0 голосов
/ 01 июля 2019

Я сделал это для получения нескольких элементов в Flatlist. В приведенном ниже коде я отметил две строки.

let isSelected = this.state.selectedItems.includes(index)

alert(selectedItems+ " Are selected " + isSelected + this.state.selectedItems.includes(index) );

Каждая строка содержит различное значение.

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  StatusBar ,
  TouchableOpacity,
  View,
  FlatList,
  ActivityIndicator,
  TouchableHighlight,
  PropTypes,
  Image,
  Alert,
} from 'react-native';

import Logo from '../components/Logo';
import Form from '../components/Front';

import {Actions} from 'react-native-router-flux';

export default class Login extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      pressed: false,
      selected_category: '',
      black: '',
      selectedItems: [],
    };
  }
  _handleCategorySelect = (index) => { 
    this.setState({selected_category: index}); 
  }
  _onPress = () => {
    this.props.onPressItem(this.props.id);
  }
  izijackpotconfirm() {
      Actions.izijackpotconfirm()
  }
  componentDidMount() {
    var that = this;
    let items = Array.apply(null, Array(25)).map((v, i) => {
      return { id: i+1, index: i };
    });
    that.setState({
      dataSource: items,
    });
  }
  _renderItems = ({item, index}) => {

    let isSelected = this.state.selectedItems.includes(index)

     return(
        <View style={{ flex: 1, flexDirection: 'column', margin: 1 }}>
          <TouchableOpacity
            onPress={() => {

               let ind = this.state.selectedItems.indexOf(index)
               let selectedItems = this.state.selectedItems
               if(isSelected && index === ind) {
                 selectedItems.splice(ind, 1) 
               } else {
                 selectedItems.push(index)
               }

               this.setState({selectedItems:selectedItems})
               alert(selectedItems+ " Are selected " + isSelected);
            }}
            style={isSelected ?  
               styles.pressed : styles.iziPizi}
            onHideUnderlay={() => {
                this.setState({ pressed: false });
            }}
            onShowUnderlay={() => {
                this.setState({ pressed: true });
            }}
            underlayColor={'gray'}
          >
              <Text style={styles.buttonText}>{ item.id}</Text> 
          </TouchableOpacity>
       </View>
     )
  }
 static navigationOptions = {
    title: "Izi Jackpot",
    headerStyle: {
      backgroundColor: "#354247"
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold"
    }
  };
    render() {

    var jackpotNumbers = [];
    let btn_class = this.state.black ? "NormalSet" : "SelectedSet";
    const textColor = this.props.selected ? 'red' : 'black';
        return(
      <View style={styles.container}>
        <View style={styles.middlecontainer}>
          <Text style={styles.logoText}>Please Select 5 Numbers and Submit</Text>
        </View>
        <FlatList
           data={this.state.dataSource}
           extraData={this.state.selectedItems}
           ref={(e) => this.items = e}
           renderItem={this._renderItems}
           numColumns={5}
           keyExtractor={(item, index) => index}
        />

        <View style={styles.middlecontainer}>
         <TouchableOpacity style={styles.button} onPress={this.izijackpotconfirm} >
           <Text style={styles.buttonText}>Submit</Text>
         </TouchableOpacity>     
        </View>
      </View>

            )
    }
}
const styles = StyleSheet.create({
  container : {
    backgroundColor:'#6F9000',
    justifyContent: 'center',
    flex: 1,
    paddingTop: 30,

  },
  middlecontainer: {
    textAlign: 'center',
    alignItems: 'center',
    justifyContent :'center',
    flex:1    
  },
  signupTextCont : {
    flexGrow: 1,
    alignItems:'flex-end',
    justifyContent :'center',
    paddingVertical:16,
    flexDirection:'row'
  },
  signupText: {
    color:'rgba(255,255,255,0.6)',
    fontSize:16
  },
  signupButton: {
    color:'#ffffff',
    fontSize:16,
    fontWeight:'500'
  },
  iziPizi: {
    width: 55,
    padding: 15,
    margin: 5,
    backgroundColor: 'rgba(255,255,255,0.6)',
    borderRadius: 80,
    borderWidth: 2,
    borderColor: '#FFFFFF',
    flex:1
  },
  pressed: {
    width: 55,
    padding: 15,
    margin: 5,
    backgroundColor:'#1c313a',
    borderRadius: 80,
    borderWidth: 2,
    borderColor: '#FFFFFF',
    flex:1
  },
  button: {
    width:300,
    backgroundColor:'#1c313a',
     borderRadius: 25,
      marginVertical: 10,
      paddingVertical: 13
  },
  buttonText: {
    fontSize:16,
    fontWeight:'500',
    color:'#ffffff',
    textAlign:'center'
  },
  logoText : {
    color:'#FFFFFF',
    fontSize: 16,
    fontWeight: '500',
    alignItems: 'center',
    justifyContent:'center',
  },
  imageThumbnail: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
  },
});

Я хочу получить this.state.selectedItems.includes(index) из вышеперечисленного. Но он показывает true, когда я его печатаю. Если я печатаю «isSelected» из вышеприведенного, он печатает false Я хотел бы знать, как получить значение true.

На самом деле я хочу выделить несколько элементов в коде с помощью onPress. Так как я могу это сделать? Пожалуйста помоги мне с этим. Я новичок в React Native.

Заранее спасибо.

...