Отключите touchableopacity, пока проверка не станет истинной

Question

Я пытаюсь отключить кнопку отправки до тех пор, пока адрес электронной почты и пароль не совпадут с моими параметрами проверки, я могу сделать это для одного поля ввода, однако, я не могу обернуться, чтобы сделать то же самое для более чем одного ввода текста, всего Я пытался не работал, как я даже пытался сделать это в 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>

javascript reactjs react-native

0

vincent O

Answer 1

У вас есть 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

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

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

Answer 2

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

это то, что вы имели ввиду?

Отключите touchableopacity, пока проверка не станет истинной

2 ответа

Новые вопросы

javascript