使用 expo 在 react-native 项目中基于多个条件禁用按钮

Question

我在 expo 中创建了一个应用程序，它具有各种字段的形式，并使用邮件和手机号码进行 otp 验证。提交按钮最初应该被禁用，并且只有在输入值并且两个 OTP 都是 verified.Can 有人帮助处理 react-native 中的状态标志时才应该启用？

Answer 1

我假设您使用的是 react-native 的原生 Button 组件。

使用按钮组件的 disabled 属性。如果设置为 true，它会禁用按钮的所有交互。

<Button disabled={true} />

在更复杂的情况下，您可以将 disabled 属性设置为这样的状态变量。

<Button disabled={buttonStatus} />

这是一个基于 TextInput 组件的工作示例。

import React, { Component } from "react";
import { TextInput, Button } from "react-native";

const App = () => {
  const [value, onChangeText] = React.useState("");
  const [value2, onChangeText2] = React.useState("");

  const [buttonStatus, setButtonStatus] = React.useState(true);

  const inputChangeHandler = () => {
    if (value.length > 0 && value2.length > 0) {
      setButtonStatus(false);
    }
  };

  return (
    <>
      <TextInput
        style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
        onChangeText={(text) => onChangeText(text)}
        onChange={inputChangeHandler}
        value={value}
      />
      <TextInput
        style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
        onChangeText={(text) => onChangeText2(text)}
        onChange={inputChangeHandler}
        value={value2}
      />

      <Button
        disabled={buttonStatus}
        title="Learn More"
        color="#841584"
        accessibilityLabel="Learn more about this purple button"
      />
    </>
  );
};

export default App;

如果你想更新real-time中按钮的状态，使用TextInput的onChange属性，或者如果你想在输入焦点失焦时更新状态使用onBlur.

这是 Expo

上的现场演示

Answer 2

使用挂钩禁用按钮。只有在两个输入中都没有空字符串时，该按钮才会启用。

import React, { useEffect, useState } from 'react';
import { Button, Text, TextInput, View } from 'react-native';

const App = () => {
  const [description, setDescription] = useState('');
  const [amount, setAmount] = useState('');
  const [disable, setDisable] = useState(true);

  useEffect(() => {
    (amount && description) ? setDisable(false) : setDisable(true);
  }, [amount, description]);

  return (
    <View>
      <TextInput value={description} placeholder='Enter a description'
        onChangeText={text => setDescription(text)} 
      />
      <TextInput value={amount} placeholder='Enter the amount in $'
        keyboardType='numeric' onChangeText={text => setAmount(text)} 
      />
      <Button disabled={disable} title='Add' />
    </View>
  )
}

export default App;

使用 expo 在 react-native 项目中基于多个条件禁用按钮

Multiple Condition based disable of button in react-native project using expo

state

button

react-native

expo

disable