在按下2个“退格键”之前,未实现的文本输入为空

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

出于某种原因,我的textfinput在第一次尝试时没有检测到它是否真的是空的,除非我再次按下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"
/>

最后,这是我处理按钮状态的两个函数,不用担心布尔值来启用/禁用按钮,这很好。

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});
}

你知道我怎样才能做到这一点吗?