基本处理形式ReactJs中的未定义输入错误

问题描述 投票:1回答:2

我正在使用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中以查找错误,这是我在表单用户名中键入内容时的错误消息。

enter image description here

希望我这次问这个严峻的问题

javascript reactjs react-bootstrap
2个回答
1
投票
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.
}

-1
投票

问题出在

console.log(this.setState)

需要一个对象来更新状态,删除日志并尝试

© www.soinside.com 2019 - 2024. All rights reserved.