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

Posted 2023-02-16

我正在使用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)

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