如何在反应本机元素 Button 组件中对禁用按钮按下应用操作？

Question

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

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

Answer 1

首先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
    }

这样就可以了。

Answer 2

这只是你的逻辑，不需要外部函数。您将需要一个状态来告诉按钮应该呈现的方式，我称之为 submitable。当 submitable 为 true 时，按钮将具有 active 样式，当 false 时应使用 disabled 样式。例如：

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,
   }
}

Answer 3

我发现 React Native 中有一个事件，即使禁用触摸也可以触发。

用作

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

如何在反应本机元素 Button 组件中对禁用按钮按下应用操作？

How to apply an action on disabled button press in react native elements Button component?

javascript

validation

reactjs

react-native

react-native-elements