如何制作 TouchableOpacity 按钮以防止多次点击

Question

我有 TouchableOpacity 个我不想执行两次的事件。

我试图在状态中放入它的 onPress 事件 bool 但这不起作用，因为设置状态是异步的，我可以快速多次按下按钮。

我也试过设置定时器，但这对我也不起作用。

有没有其他方法可以防止多次按下按钮（一些其他类似组件等）？

Answer 1

您不需要 setState 存储不反映为 UI 更改的值。

您可以直接在您的 React Class 中使用 this.flag 而不是 this.state.flag，您在点击 TouchableOpacity 时设置了它。因此，您可以设置 this.flag 而不是涉及渲染周期的异步操作。它只是您的组件持有的标志。

参见下面的示例：

class SomeComponent extends React.Component{
  constructor() {
   super();
   this.state = { ... }; // this does not need to store our flag
   this.touchableInactive = false; // this is not state variable. hence sync
  }

  onButtonClick () {
    if (!this.touchableInactive) {
      this.touchableInactive = true;
      // do stuff
    }
  }

      // similarly reset this.touchableInactive to false somewhere else
}

如何制作 TouchableOpacity 按钮以防止多次点击

How to make TouchableOpacity button to prevent multiple clicks

reactjs

react-native

touchableopacity