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

Question

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

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

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

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

Answer 1

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

您可以直接在您在 TouchableOpacity 单击时设置的 React 类中使用this.flag而不是。this.state.flag因此，您可以在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
}