未捕获的类型错误：无法读取未定义的属性(读取"setState")

Question

class SignIn extends React.Component {
constructor() {
super();
this.state = {
SignInuserName: "",
SignInPassword: "",
};
}
onUsernameChange(event) {
console.log(event.target.value);
this.setState({ SignInuserName: event.target.value });
}
onPasswordChange(event) {
console.log(event.target.value);
this.setState({ SignInPassword: event.target.value });
}
onSubmitSignin = () => {
console.log(this.state);
this.props.onRouteChange("home");
};
render(){
return(
<div>
<input className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="text"
name="user-name"
id="user-name"
onChange={this.onUsernameChange}
/>
<input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="password"
name="password"
id="password"
onChange={this.onPasswordChange}
/>

<input className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
type="submit"
value="Sign in"
onClick={this.onSubmitSignin}
/>
</div>
)}

当我输入用户名或密码时，我会收到这个错误：

未捕获类型错误：无法读取未定义的属性(读取"setState"(

并输入我键入的标签值，但该值不在此。state它总是在中返回空值，但console.log(event.target.value(正在正确地记录

SignInuserName: "",
SignInPassword: ""

Answer 1

因为您应该将您的状态作为值传递给您的输入：

<input className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="text"
value={this.state.SignInuserName}
name="user-name"
id="user-name"
onChange={this.onUsernameChange}
/>
<input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
type="password"
value={this.state.SignInPassword}
name="password"
id="password"
onChange={this.onPasswordChange}
/>