文本输入在按下 2 'backspace'之前为空

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 个函数，不必担心布尔值来启用/禁用按钮，这工作正常。

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 返回一个按下键的对象，因此警告是因为 state 中的密码和用户名的属性文本包含对象而不是字符串。

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