TouchableOpacity 和 TouchableHighlight 始终禁用

Question

我试图在 username/password 字段未填充时禁用 TouchableOpacity 元素。这是行不通的。它始终处于禁用状态。

我打印了条件!this.state.username || !this.state.password 控制台，只有当两者都被填充时它才为假，这是期望的结果，但 TouchableOpacity 的禁用属性似乎没有反映这种情况下的值。下面是我的代码片段：

谁能提出解决这个问题的方法？

<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 中为该状态赋值。

只需在两个文本输入中替换这一行

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

和

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

TouchableOpacity 和 TouchableHighlight 始终禁用

TouchableOpacity and TouchableHighlight always disabled

react-native

touchableopacity

touchablehighlight