我正在做一个利用注册页面和登录页面的项目。在开始设计样式之前,我能够正常地在字段中键入内容。一旦我开始设计样式,就会出现以下错误:
https://i.imgur.com/AGWz3r5.png
如果我在密码框中键入字母,它会显示在用户名字段下。查看屏幕盖,如果我然后键入字母“H”,我会在用户名字段下看到该字母,而不是“g”。我发现有些东西标签错误和/或位置错误,我对样式所做的唯一编辑是在
render()
部分此外,用户名字段工作正常。
这是索引。js文件:
class Register extends React.Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: "",
clickedRegister: false
};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleRegisterSubmit = this.handleRegisterSubmit.bind(this);
}
handleInputChange(evt) {
console.log(evt.target);
this.setState({
[evt.target.name]: evt.target.value
})
};
handleRegisterSubmit(evt) {
evt.preventDefault();
console.log('you clicked button');
this.setState({
clickedLogin: true
})
};
render() {
return (
<form onSubmit={this.handleRegisterSubmit}>
<div className="form">
<h2 className="create-account">Create an account!</h2>
<div className="form-group">
<label className="user-label">
<medium className="form-text">We'll never share your username with anyone else.</medium>
<br />
<input className="user-box"
name="username"
placeholder="Enter username"
value={this.state.username}
onChange={this.handleInputChange}
/>
</label>
</div>
<div className="form-group">
<label className="pass-label">
<br />
<input className="user-box"
name="username"
placeholder="Enter password"
value={this.state.password}
onChange={this.handleInputChange}
/>
</label>
<br />
<button className="register-button">Submit</button>
</div>
</div>
</form>
)
}
}
export default Register;