Reactjs TextInput在2'之前为空；退格'；受压

我得到了一个带有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"
/>

---

你知道我该如何做到这一点吗

尝试使用onChangeText而不是onKeyPress。 一旦ChangeText将更改后的文本作为回调参数传递，onKeyPress将返回一个按下键的对象，因此发出警告是因为状态为password and username的属性文本包含一个对象而不是字符串

编辑

---

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

是的，我太蠢了。我必须将onChangeText与onKeyPress结合起来。在onKeyPress上使用checkValidation，onChangeText将保存状态。我觉得很傻。我修正了它，但你知道为什么如果我删除最后一个字符，状态似乎没有反映为空，它仍然有最后一个字符作为值，除非我再次按backspace键，然后它抓住它。尝试删除onKeyPress，并在设置状态之前在validateInput中进行验证检查。因此，您将使用要设置的最终属性调用setState一次。是的，您是对的。另外，setState和同步可能有问题，调试后我发现在执行setState之后，我的password.value仍然为空。我记得在setState有一个承诺，你可以把它们锁起来，还记得吗？自2016年以来，我不再使用react native，每当您执行setState之后，您调用一个函数，该函数可能会通过setState使用最近更改的状态，您可能不会立即看到反映的更改。所以setState有一个回调，所以在状态永久改变后，您可以做任何事情

this.setState（{variable:newValue}，（）=>function（）{//do after setState}）

回到我使用react native时，我记得我也遇到过同样的问题。感谢您的回复和帮助：）

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