时间戳

首页 > 解决方案 > 我应该为每个 onPress 编写不同的函数吗

react-native - 我应该为每个 onPress 编写不同的函数吗

问题描述

我有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>

标签： react-native

解决方案

我想你自己猜到了你的错误是没有区分你的盒子。

您可以为每个按钮指定一个 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>

我敢肯定还有其他方法可以解决您的问题，只需使用状态并即兴发挥。

推荐阅读