React Native 中的禁用按钮

Question

我在尝试禁用与按钮的交互时遇到登录问题。我的想法是在 2 个文本字段为空时禁用提交按钮，但无论是否为空（始终可点击，或始终不可点击），我都会得到相同的结果。下面我详细说明我的想法，以及我是如何实现的。

我有两个状态，用于存储来自两个文本输入的值，然后我有一个函数“isEmpty”，用于查询状态是否为空（“”）。后来，在按钮“提交”中，我有一个属性 'disabled' 哪个值是 isEmpty 的结果，即，如果 isEmpty 为真，禁用为真，用户不会单击按钮，除非文本输入被填充。我尝试了一些方法，例如将 return 更改为其他选项，或更改禁用的值，但我没有好消息。

我从网上和这个网站上搜索，但解决方案没有解决我的问题。

这里我分离了一些函数、状态和属性的代码。

<View style={styles.submit}>
        <TouchableOpacity
          onPress={() => checkValidation()}
          disabled={emptyFields}
        >
          <Text style={styles.button}> Submit </Text>
        </TouchableOpacity>
      </View>

checkEmptyFields -> 通过 checkValidation 调用函数来确定文本输入是否为空

const checkEmptyFields = () => {
if (
  (id === "" && psw === "") ||
  (id === "" && psw !== "") ||
  (id !== "" && psw === "")
)
  setEmptyFields(true);
};

const checkValidation = () => {
checkEmptyFields();
verifyUser();
resetStates();
};

使用的状态

const [id, setId] = useState("");

const [psw, setPsw] = useState("");

const [emptyFields, setEmptyFields] = useState(false);

Answer 1

我发现了问题。在属性禁用状态下，我评估了一个仅在 onPress 函数中计算的状态。解决方法是复制 disabled 中的 checkEmptyFields 行。

React Native 中的禁用按钮

Disabled Button in React Native

native

button

reactjs