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

问题描述

假设有一个带有输入的表单。提交按钮被禁用，直到 input 元素中有输入。

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

解决方法

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

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

>

唯一可能的方法如下。

1. 保留一个表示按钮禁用状态的标志，例如 buttonDisabled
2. 基于上述标志，将 CSS 样式应用于按钮，使其看起来像一个禁用的按钮（例如变灰）
3. 当按下此按钮时，将调用 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
    }

这样就可以了。

,

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

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

,

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

用作

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