我正在使用React Bootstrap库处理ReactJs表单,在浏览器中运行表单时出现错误Undefined。在终端中,我没有错误。
constructor(props){
super(props);
this.state = {
username: '',
password: '',
fullname: ''
}
this.handleUsername = this.handleUsername.bind(this);
this.handlePassword = this.handlePassword.bind(this);
this.handleFullname = this.handleFullname.bind(this);
this.submitUser = this.submitUser.bind(this);
}
handleUsername = (event) => {
this.setState({
username : event.target.value
}, () => console.log(this.setState))
}
handlePassword = (event) => {
this.setState({
password: event.target.value
})
}
handleFullname = (event) => {
this.setState({
fullname: event.target.value
})
}
我尝试了一些处理表单的建议,但仍然无法正常工作。这是我编码的形式:
<Form className="salesUser text-left " variant="success" onSubmit={this.submitUser}>
<Form.Group>
<Form.Label>Username</Form.Label>
<Form.Control type="text" value={this.state.username} onChange={this.handleUsername}></Form.Control>
</Form.Group>
<Form.Group>
<Form.Label>Password</Form.Label>
<Form.Control type="password" value={this.state.password} onChange={this.handlePassword}></Form.Control>
</Form.Group>
<Form.Group>
<Form.Label>Full Name</Form.Label>
<Form.Control type="text" value={this.state.fullname} onChange={this.handleFullname}></Form.Control>
</Form.Group>
<Row>
<Col>
<Button type="submit" value="Submit" block>Submit</Button>
</Col>
</Row>
</Form>
我试图将console.log放入handleUsername中以查找错误,这是我在表单用户名中键入内容时的错误消息。
希望我这次问这个严峻的问题
handleUsername = (event) => {
this.setState({
username : event.target.value
})
console.log(this.setState) //**invlaid code** should be this.state but still you won't get the updated state. Instead try this as below
this.setState({
username : event.target.value
}, () => console.log(this.state)) //this callback function will log your updated state in console.
}
问题出在
console.log(this.setState)
需要一个对象来更新状态,删除日志并尝试