使用 onPress 一次反应原生调用函数答案

【问题标题】：React native call function once using onPress使用 onPress 一次反应原生调用函数
【发布时间】：2018-10-28 03:59:25
【问题描述】：

我是 React native 的新手，当用户在同一个组件上多次触摸时，onPress 事件会被多次调用，这也是我的方法。

onPress={() => this.onItemPressed(type)}

我想知道在 React native 上调用此方法的最佳方式或一种好的现有方式是一次，即使用户触摸多次如果用户在组件中触摸，则不会破坏我的应用并仅加载一次。

提前感谢

【问题讨论】：

标签： react-native mobile

【解决方案1】：

您可以禁用按钮本身并等待您的逻辑完成，然后再启用它或执行下一步操作：

<Button
  onPress={() => this.onItemPressed(type)}
  disabled={this.state.itemPressedDisabled}>

onItemPressed(type) {
  this.setState({itemPressedDisabled: true})

  // ...code logic here

  // Use below if you want to enable the button again after you're done
  // this.setState({itemPressedDisabled: false})
}

【讨论】：

当时我为此使用本地状态。我喜欢使用 disabled 属性，因为它是为此目的而内置的。

【解决方案2】：

您可以做的是向您的组件添加一个disabled 状态。如果代码被执行，则将其设置为 true，并在每次按下时检查 disabled 是否为 false

例子：

onPress(){
    if( this.state.disabled === false ) {
        // TODO: Execute your code
        this.setState({ disabled: true })
    }    
}

【讨论】：

【解决方案3】：

onPress(){
    const { disabled } = this.state;
    if(!disabled){
        this.setState({ disabled: true })
        // Other logic or button functionality
    }    
}

【讨论】：