选择单行 Flatlist React native

Question

嘿，伙计们，我正在制作一个自定义尺寸选择器，我想一次选择一个尺寸，但 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>
   }
/>

Answer 1

我不确定您要设置哪种状态，但您需要牢记调用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>
   }
/>