Question

我有16个盒子。每个盒子都有自己的TouchableOpacity。

如何禁用已经按下的按钮？

我对所有盒子使用了相同的功能。当我按下其中一个时，所有盒子一起工作。

我如何分开它们？

这是我的onPress功能。

onTap(){
  if(!this.pressed){
    this.pressed=true;
    let rastgele=Math.floor(Math.random() * (this.state.music.length));
    Linking.openURL(this.state.music[rastgele]);
    console.warn('pressed',rastgele);
   }
}

箱：

<View style={{MYSTYLE}}>
  <TouchableOpacity onPress={this.onTap} style={{MYSTYLE}}>
    <Text style={styles.textStyle}> 1 </Text>
  </TouchableOpacity>
</View>

Answer 1

我认为你自己猜到了你的错误并没有区分你的盒子。

您可以为每个按钮指定一个ID，并跟踪您所在州的ID按下哪个按钮。

首先初始化一个状态变量，您将在其中跟踪您的更改：

state = {
    pressedBoxes: {}
}

然后更改onTap函数以接受id作为参数：

onTap = buttonId => {
    const { pressedBoxes } = this.state;

    this.setState({
      pressedBoxes: {
        ... pressedBoxes,
        [buttonId]: !Boolean(pressedBoxes[buttonId]),
      },
    });

    // ... Whatever other code you have should go here
};

然后最后使用状态变量来禁用按钮：

<View style={{MYSTYLE}}>
    <TouchableOpacity
          onPress={() => this.onTap('1')}
          style={styles.MYSTYLE}
          disabled={this.state.pressedBoxes['1']}>
          <Text style={styles.textStyle}> 1 </Text>
    </TouchableOpacity>

    <TouchableOpacity
          onPress={() => this.onTap('2')}
          style={styles.MYSTYLE}
          disabled={this.state.pressedBoxes['2']}>
          <Text style={styles.textStyle}> 2 </Text>
    </TouchableOpacity>


    <TouchableOpacity
          onPress={() => this.onTap('3')}
          style={styles.MYSTYLE}
          disabled={this.state.pressedBoxes['3']}>
          <Text style={styles.textStyle}> 3 </Text>
    </TouchableOpacity>
</View>

我确定还有其他方法可以解决您的问题，只需使用状态和即兴创作。

我应该为每个onPress编写不同的函数吗？

1 个答案: