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>
   }
/>

选择Flatlist React native的单行

1 个答案: