Question

这是我在Stackoverflow中的第一个问题，我不是专业开发人员，所以请好心:)如果需要任何其他信息，请告诉我。

因此，我正在尝试为显示他的每日行程的送货员创建一个清单。在这个例子中，他有4个地址要去。当他到达第一个位置（在这种情况下为“ METAL”）时，他应该按下黄色按钮。按下黄色按钮应禁用它并更改其背景颜色，但仅应放在第一位“ METAL”。

现在，当我按下黄色按钮时，它禁用并更改了平面列表中所有按钮的背景颜色，我不确定如何仅将被单击的一个按钮作为目标。

我附上了一些图片以显示发生了什么。最后一张照片只是我想要的例子。

这是代码首先加载的内容

这是当我按下黄色按钮时发生的情况。所有按钮均已禁用

这就是我想要的，只禁用我实际点击的按钮

        this.state = {disablearrived: false,
        disablesuccess: false,
        disablenotdelivered: false,
        showView: true,
        fadeAnim: new Animated.Value(0),
        colorarrived: '#E5C454',
        colorsuccess: '#52D273',
        colornotdelivered: '#E94F64',
        data: [
          { id: "1", custid: "1111111111111", name: "METAL",  nf: "166951" },
          { id: "2", custid: "222222222222", name: "BRUNO", nf: "166952" },
          { id: "3", custid: "8248632473", name: "Doc Hudson" },
          { id: "4", custid: "8577673", name: "Cruz Ramirez" },

        ],
      };



    onPressButtonarrived(item) {
      //  Alert.alert('Chegada às: '+new Date().toLocaleTimeString('pt-BR', {timeZone: 'America/Sao_Paulo'}))
        this.setState({ disablearrived: true })
        this.setState({ colorarrived: '#D6D6D6' })
      }

    render() {
    return (
      <View style={{ backgroundColor: '#252525'}}>
      <View>
        <Text style={styles.normalblue}>Bem vindo, Victor</Text>
        <Text style={styles.normalblue}>Estas são suas entregas de dia</Text>
        </View>
        <FlatList
          data={this.state.data}
          extraData={this.state}
          keyExtractor={item => item.id}
          renderItem={({ item }) => {
            return (
              <View style={{backgroundColor: '#484848', borderBottomColor: '#252525', borderBottomWidth: 20}}>
                <Text style={styles.bigyellow}>{item.name}</Text>
                <Text style={styles.smallblue}>{item.add}, {item.addnumber}</Text>
        <Text style={styles.normalyellow}>NF {item.nf}</Text>
        <View style={styles.containercontent}>
        <View style={{backgroundColor: this.state.colorarrived, justifyContent: 'center', flex: 1}}>
        <TouchableHighlight style={styles.buttonview}
        onPress={() => {this.onPressButtonarrived(item)}} disabled={this.state.disablearrived}>
      <View style={styles.btnIcon}>
      <Icon name="location" size={30} />
        <Text>Chegada</Text>
      </View>
    </TouchableHighlight>
</View>
        <View style={{backgroundColor: this.state.colorsuccess, justifyContent: 'center', flex: 1}}>
        <TouchableHighlight style={styles.buttonview}
        onPress={() => {this.onPressButtonsuccess(item)}} disabled={this.state.disablesuccess}>
      <View style={styles.btnIcon}>
      <Icon name="check" size={30} />
        <Text>Entregue</Text>
      </View>
    </TouchableHighlight>
</View>
{this.state.showView && (
        <View style={{backgroundColor: this.state.colornotdelivered, justifyContent: 'center', flex: 1}}>
        <TouchableHighlight style={styles.buttonview}
        onPress={() => {this.onPressButtonnotdelivered(item)}} disabled={this.state.disablenotdelivered}>
      <View style={styles.btnIcon}>
      <Icon name="block" size={30} />
        <Text>Não Entregue</Text>
      </View>
    </TouchableHighlight>
</View>
)}
              </View>
              </View>
            );
          }}
        />
      </View>
    );
  }

Answer 1

由于您将所有按钮都显示在一个平面列表中，它们共享相同的状态，因此为什么当您单击一个按钮时所有其他按钮都被禁用。

您将不得不分开按钮并为其赋予单独的状态，以便它们可以单独更改

Answer 2

我刚发现我需要为状态分配ID，以便更改所按按钮的颜色。

    onPressButtonarrived(item) {
        this.setState({ disablearrived: item.id })
        this.setState({ colorarrived: item.id })
      }


<View style={[styles.button, {backgroundColor: item.id === this.state.colorarrived ? '#D6D6D6' : '#E5C454'}]}>
        <TouchableOpacity style={styles.buttonview}
        onPress={() => {this.onPressButtonarrived(item)}} disabled={item.id === this.state.disablearrived ? true : false}>
      <View style={styles.btnIcon}>
      <Icon name="location" size={30} />
        <Text>Chegada</Text>
      </View>
    </TouchableOpacity>
</View>

React Native：Flatlist Onpress函数会禁用所有TouchableHighlight字段，而不仅仅是被按下的字段

2 个答案: