基本处理表单 ReactJs 中的未定义输入错误答案

【问题标题】：Undefined Input Error in Basic Handling Form ReactJs基本处理表单 ReactJs 中的未定义输入错误
【发布时间】：2020-02-20 13:34:15
【问题描述】：

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

希望这次我问的是正确的问题

【问题讨论】：

你能创建一个 stackblitz 演示吗
该屏幕截图不是错误，您正在记录 setState 函数的定义。你想做什么，有什么问题？
@Tim 我正在尝试提交表单并在控制台浏览器中显示数据。但是我得到了未定义的错误，如上图所示

标签： javascript reactjs react-bootstrap

【解决方案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.
}

【讨论】：

【解决方案2】：

问题出在

console.log(this.setState)

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

【讨论】：