Submit Button On Function表单不运行Submit函数

Question

我正在使用react构建一个登录表单，但是当按submit按钮时，控制台中什么都不会发生。

   import React from "react";




export class Login extends React.Component {


    constructor(props){
        super(props);
        this.submitHandler = this.submitHandler.bind(this);
        this.state = {
            username: '',
            password: '',
        }
    }
    changeHandler = (e) => {
        this.setState({[e.target.name]: e.target.value})
    }
    submitHandler = e => {
        e.preventDefault()
        console.log("worked")
        console.log(this.state)
    }

    render() {
        const {username, password} = this.state

        return <div className = "base-container" ref={this.props.containerRef}>
            <div className="content">
              <div className="logo">
                <img src={Logo} alt="logo"/>
              </div>
              <div className="form" onSubmit={this.submitHandler}>
                  <div className="form-group">
                      <label htmlFor="username"> Username</label>
                      <input type="text" 
                      name="username" 
                      value ={username} 
                      placeholder="Username"
                      onChange={this.changeHandler}/>
                  </div>
                  <div className="form-group">
                      <label htmlFor="password"> Password</label>
                      <input type="password" 
                      name="password" 
                      value={password} 
                      placeholder="Password"
                      onChange ={this.changeHandler}/>
                  </div>
              </div>
            </div>
            <div className="footer">
                <button type="submit" className="btn">Login</button>
            </div>
        </div>

    }
}

我遗漏了什么吗？我尝试过将submit按钮移动到表单标记中，但似乎也不起作用。

Answer 1

您需要一个表单标记才能使onSubmit工作。另外，如果您想要preventDefault，则需要在submitHandler中传递事件。

因此，替换：

<div className="form" onSubmit={this.submitHandler}>

通过以下方式：

<form className="form" onSubmit={this.submitHandler(event)}>

还要确保将关闭的</div>替换为</form>。

Answer 2

onSubmit属性是特定于窗体而不是div的。您可以将div更改为表单，也可以将onSubmit更改为onClick，并将onClick放到按钮中。此外，如果要使用箭头函数定义类方法，则不需要将其绑定到构造函数中。希望这能帮上忙！

编辑:如果使用表单，提交按钮必须在表单的结束标记内。