javascript - 禁用 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>

标签： javascriptreactjsreact-native

Answer 1

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

你是这个意思吗？