reactjs - 直到按下 2 'backspace' 才意识到 TextInput 是空的

Question

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

出于某种原因，我的 TextInput 在第一次尝试时没有检测到它何时真正为空，除非我再次按下退格键，然后我的按钮将被禁用/启用。必须与我拯救各州的方式有关。

这是代码:

我的状态如下:

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 个函数，不用担心启用/禁用按钮的 bool 值，它工作正常。

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。