Я пытаюсь отключить кнопку отправки до тех пор, пока адрес электронной почты и пароль не совпадут с моими параметрами проверки, я могу сделать это для одного поля ввода, однако я не могу обернуть голову, чтобы сделать то же самое для более одного текстового ввода, все Я пробовал, не получилось, я даже пытался сделать это в componentDidMount. Ниже приведен примерный пример кода того, что у меня есть на данный момент.

        class Login extends Component {
          constructor(props) {
            super(props);
            this.state = {
              showpass: true,
              email: '',
              password: '',
              validEmail: true,
              validPassword: true,
              disabled: true,
            };
          }

          onChangeEmail(email) {
            const emailCheckRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            this.setState({ email });

            if (emailCheckRegex.test(email)) {
              console.log('Email is Correct');
              this.setState({
                validEmail: true, disabled: false,
              });
            } else if (!emailCheckRegex.test(email)) {
              console.log('Email is not Correct');
              this.setState({
                validEmail: false, disabled: true,
              });
            }
          }

          onChangePassword(password) {
            this.setState({ password });
              if (password.length > 5) {
                //Password has to be at least 5 characters long
                this.setState({
                  validPassword: true,
                });
              } else if (password.length <= 5) {
                this.setState({
                  validPassword: false,
                });
              }
          }



          render() {
            const { showpass, email, password, validEmail, validPassword, disabled } = this.state;
            const opacityStyle = disabled ? 0.2 : 1;

            return (
            <View style={styles.inputWrapper}>
              <Text style={styles.loginTextStyle}>Email</Text>
              <View style={validEmail ? styles.inputCon : styles.inputConError}>
                <TextInput
                  placeholderTextColor='#343845'
                  style={styles.inputField}
                  onChangeText={this.onChangeEmail.bind(this)}
                  value={email}
                  keyboardType='email-address'
                  autoCorrect={false}
                  // placeholder={placeholder}
                  underlineColorAndroid="transparent"
                />
              </View>
            </View>
            <View style={styles.inputWrapper}>
              <Text style={styles.loginTextStyle}>Password</Text>
              <View style={validPassword ? styles.inputCon : styles.inputConError}>
                <TextInput
                  placeholderTextColor='#343845'
                  style={styles.inputField}
                  onChangeText={this.onChangePassword.bind(this)}
                  value={password}
                  keyboardType='email-address'
                  autoCorrect={false}
                  // placeholder={placeholder}
                  secureTextEntry={showpass}
                  underlineColorAndroid="transparent"
                  returnKeyType='done'
                />
              </View>
              <TouchableOpacity
                style={[{ opacity: opacityStyle }, styles.btnStyle]}
                disabled={disabled}
              >
                <Text style={styles.loginStyle}>Login</Text>
              </TouchableOpacity>
0
vincent O 28 Окт 2019 в 12:56
Disabled установлено значение true, и вы не обновляете его, как вы этого добиваетесь?
 – 
ibtsam
28 Окт 2019 в 13:11
Я обновил код выше
 – 
vincent O
28 Окт 2019 в 13:13

3 ответа

 disabled={this.state.email === '' || this.state.password === ''}

Это то, что ты имеешь в виду?

0
whd.nsr 28 Окт 2019 в 13:06
Да, но не тогда, когда он пустой, а когда он не содержит адреса электронной почты и пароля из 5 и более символов
 – 
vincent O
28 Окт 2019 в 13:09
Он все еще не работает, кнопка остается отключенной. Можете ли вы помочь взглянуть на это еще раз?
 – 
vincent O
28 Окт 2019 в 14:19

У вас есть validEmail и validPassword в состоянии, его значение по умолчанию должно быть false, как

constructor(props) {
        super(props);
        this.state = {
          showpass: true,
          email: '',
          password: '',
          validEmail: false,
          validPassword: false,
        };
      }

То вы можете использовать их, чтобы отключить отправку, пока оба не будут проверены как

// ...
<TouchableOpacity
   style={[{ opacity: opacityStyle }, styles.btnStyle]}
   disabled={!this.state.validEmail || !this.state.validPassword}
>
// remaining code

Вам не нужно отключать в состоянии

Надеюсь, это поможет

0
ibtsam 28 Окт 2019 в 13:28
Он все еще не работает, кнопка остается отключенной. Можете ли вы помочь взглянуть на это еще раз?
 – 
vincent O
28 Окт 2019 в 14:19
Вы можете ввести свой TextInput?
 – 
ibtsam
28 Окт 2019 в 15:09
Да, я могу ввести свой текстовый ввод, а также я работаю с react native, я не думаю, что смогу сделать фрагмент песочницы, используя это.
 – 
vincent O
28 Окт 2019 в 15:11
Длина вашего пароля должна быть шесть, чтобы кнопка была активна
 – 
ibtsam
28 Окт 2019 в 15:19
Можете ли вы проверить, какое значение имеют this.state.validEmail и this.state.validPassword, когда вы вводите допустимые значения?
 – 
ibtsam
28 Окт 2019 в 15:22

Вам не нужно несколько функций для проверки ваших входных данных, просто имейте одну функцию для обработки входных изменений и одну для проверки.

disabled: false, // set disable to false by default

handleInput = (name, value) => {
  this.setState(
    {
      [name]: value,
    },
    this.validateInput
  );
};

validateInput = () => {
  const emailCheckRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  const validEmail = emailCheckRegex.test(this.state.email);
  const validPassword =
    (this.state.password && this.state.password.length > 5) || false;

  this.setState({
    validEmail: validEmail,
    disabled: (validEmail && validPassword) || false,
    validPassword: validPassword,
  });
};

const opacityStyle = disabled ? 1 : 0.2; // change opacity logic

<TouchableOpacity
  style={[{ opacity: opacityStyle }, styles.btnStyle]}
  disabled={!disabled}> {/* change here as well */}
  <Text style={styles.loginStyle}>Login</Text>
</TouchableOpacity>

ДЕМО

0
Junius L. 1 Дек 2019 в 10:29