如何在反应原生元素按钮组件中对禁用按钮按下应用操作？答案

【问题标题】：How to apply an action on disabled button press in react native elements Button component?如何在反应原生元素按钮组件中对禁用按钮按下应用操作？
【发布时间】：2021-04-03 06:11:18
【问题描述】：

假设有一个带有输入的表单。在输入元素中有输入之前，提交按钮处于禁用状态。

当用户输入输入时，提交按钮被启用，用户可以轻松提交表单。但是如果没有输入并且用户按下禁用的提交按钮，则应该采取onDisabledPress()处理程序。

【问题讨论】：

标签： javascript reactjs react-native validation react-native-elements

【解决方案1】：

这只是您的逻辑，不需要外部功能。你需要一个状态来告诉按钮它应该呈现的方式，我称之为submitable。当submitable 为真时，按钮将具有活动样式，当为假时，它应使用禁用样式。例如：

const submitable = state.formInput1.length > 0 && state.formInput2.length > 0;

return (
   <TouchableOpacity
      style={submitable ? styles.active : styles.disaled}
      onPress={()=> {
         if (submitable) {
            console.log("Success")
         } else {
            console.log("You must input all required field")
         }
      }}
   ><Text>Submit</Text></TouchableOpacity>
)

const styles = {
   active: {
      backgroundColor: 'blue',
   },
   disabled: {
      backgroundColor: 'gray',
      opacity: 0.5,
   }
}

【讨论】：

【解决方案2】：

首先Disabled 表示无法对按钮执行任何操作，或者不会为禁用的按钮触发任何事件。

从您的用例中我可以理解的是，您希望按钮看起来像一个禁用按钮，并且当用户传递按钮而不是 onPress onDisabledPress 函数时应该被调用。

唯一可行的方法如下。

保留一个标志，保持按钮的禁用状态，例如buttonDisabled
基于上述标志，将 CSS 样式应用于按钮，使其看起来像一个禁用按钮（例如灰显）
按下此按钮时，onPress 偶数处理程序将被调用。将下面这段代码添加到该句柄

    onPressHandler(){
    // make sure below lines are the first lines to execute in the onPressHandler
    if(this.state.buttonDisabled){
       this.onDisabledPress();
       return;
    }
    }
    onDisabledPress(){
     // disabled handler
    }

这样就可以了。

【讨论】：

【解决方案3】：

我发现 react native 中有一个事件，即使触摸被禁用，你也可以触发它。

它被用作

   onTouchStart={() => {
            console.log('yoo, button is touched');
     }}

【讨论】：