Question

当用户名/密码字段未填写时，我试图禁用TouchableOpacity元素。这是行不通的。它始终处于禁用状态。

我打印了条件!this.state.username || !this.state.password 进行控制台操作，并且只有在两者都被填充时才为false，这是期望的结果，但是TouchableOpacity的disable属性似乎无法在这种情况下反映该值。以下是我的代码段：

有人可以建议解决此问题的方法吗？

<ScrollView style={styles.content}>
      <View style={[styles.container, styles.content]}>
        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={emailicon}/>
          <TextInput style={[styles.inputs]}
              ref={`username`}
              placeholder="Email"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(text) => {this.state.username = text}}
              required={true}
          />
        </View>

        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={keyicon}/>
          <TextInput
              style={styles.inputs}
              ref={`password`}
              placeholder="Password"
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(text) => {this.state.password = text}}
              required={true}
          />
        </View>

        <TouchableOpacity style={[styles.buttonContainer, styles.loginButton]}
                            onPress={() => { console.log(!this.state.username || !this.state.password) }} disabled={!this.state.username || !this.state.password}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableOpacity>

Answer 1

尝试使用setState代替在 onChangeText 中为该状态分配值。

只需在两个textInput中替换此行

onChangeText={(text) => {this.setState({username:text})}}

和

onChangeText={(text) => {this.setState({password:text})}}

始终禁用TouchableOpacity和TouchableHighlight

1 个答案: