Question

我有一个包含2个输入的登录表单，基本的用户名/密码。我想验证两个文本值以禁用或启用“登录”按钮。

由于某种原因，我的TextInput不会在第一次尝试时检测它是否真正为空，除非再次按下Backspace键，然后我的按钮将被禁用/启用。我保存状态的方式必须与之相关。

这是代码：

我的状态如下：

this.state = {
    loading: false,
    username: {
        text: '',
        valid: false
    },
    password: {
        text: '',
        valid: false
    },
    isLoginValid: false
};

然后是这些按钮：

 <TextInput
    style={styles.textInput}
    onChangeText={ (text) => { this.validateInput(text, 'username')}}
    onKeyPress={ this.checkValidation.bind(this) }
    value={this.state.username.text}
    autoCapitalize={'none'}
    placeholder={'Username'}
    underlineColorAndroid="transparent"
 />

<TextInput
    secureTextEntry={true}
    style={styles.textInput}
    onChangeText={ (text) => { this.validateInput(text, 'password')}}
    onKeyPress={ this.checkValidation.bind(this) }
    value={this.state.password.text}
    autoCapitalize={'none'}
    placeholder={'Password'}
    underlineColorAndroid="transparent"
/>

最后，这些是我处理按钮状态的2个函数，不用担心启用/禁用按钮的布尔值，效果很好。

validateInput(text, fieldname) {
    var stateObject = {
        text: text,
        valid: text.length > 0
    }
    this.setState({ [fieldname]: stateObject });
}

checkValidation() {
    var isValid = this.state.username.valid && this.state.password.valid;
    this.setState({isLoginValid: isValid});
}

关于如何实现此目标的任何想法？

Answer 1

尝试使用onChangeText代替onKeyPress。 onChangeText将更改后的文本作为回调的参数传递，onKeyPress返回一个按下了键的对象，因此发出警告是因为密码和用户名的属性文本处于状态而不是字符串。

编辑关于第二个问题（使用退格键），请注意onKeyPress在onChange回调之前被调用，因此在设置更改的文本之前进行验证，请尝试完全删除onKeyPress，并在setState之前在validateInput内部进行验证检查。因此，您将使用要设置的最终属性调用一次setState。

直到按下2个“退格键”，未实现的TextInput为空

1 个答案: