Выберите один ряд из Flatlist React native - PullRequest
Новая
       33

Выберите один ряд из Flatlist React native

0 голосов
/ 12 декабря 2018

Эй, ребята, я делаю сборщик нестандартного размера. Я хочу выбрать один размер за раз, но элемент onPress изменился.

мое событие onPress 

onPressItemSize = (item,index:string) => {
  this.setState((item) => {
    const xl =
    xl == item ? this.setState({xl:true}) : this.setState({xl:false});
    return { xl };
  });
  this.setState({selectedSize:item.value})
};

и это мой плоский список компонента 

<FlatList
  data={this.state.label}
  numColumns={5}
  keyExtractor={(item, index) => index.toString()}
  extraData={this.state}
  renderItem={({item,index}) =>
    <View style={{padding:10,}}>
      <TouchableOpacity 
        onPress={this.onPressItemSize.bind(this, item,index)}
        style={[styles.Buttoncolor,this.state.xl?null:styles.onfocusbutton]}>
        <Text adjustsFontSizeToFit 
          textTransform='uppercase' 
          style={[styles.textcolor,this.state.xl?null:styles.white]}>
          {item.label}
        </Text>
      </TouchableOpacity>
    </View>
   }
/>

1 Ответ

0 голосов
/ 12 декабря 2018

Я не уверен, какое состояние вы пытаетесь установить, но вам нужно помнить, что вызов setState вызовет асинхронную функцию, и вам нужно дождаться успешного изменения нового состояния.я бы также использовал функции стрелок, чтобы не связывать функции при их вызове. 

onPressItemSize = (item, index) => {

  const { xl } = this.state;  //what is xl ?? im assuming it is in your state
  const callback = () => {console.log("State changed");}

  var newXL = false;

  if(xl === item){
    newXL = true
  }

  //you can set diferents values at the same time
  this.setState({xl: newXL, selectedSize: item.value }, callback)

};



<FlatList
  data={this.state.label}
  numColumns={5}
  keyExtractor={(item, index) => index.toString()}
  extraData={this.state}
  renderItem={({item, index}) =>
    <View style={{padding:10,}}>
      <TouchableOpacity 
        onPress={() => onPressItemSize(item, index)}     //changed
        style={[styles.Buttoncolor,this.state.xl?null:styles.onfocusbutton]}>
        <Text adjustsFontSizeToFit 
          textTransform='uppercase' 
          style={[styles.textcolor,this.state.xl?null:styles.white]}>
          {item.label}
        </Text>
      </TouchableOpacity>
    </View>
   }
/>
...