React 表单上的提交按钮未运行提交 Function

Question

我正在使用反应构建登录表单，但是当按下提交按钮时，控制台中没有任何反应

   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>

    }
}

有什么我想念的吗？ 我尝试将提交按钮移动到表单标签中，但这似乎也不起作用

Answer 1

onSubmit 属性特定于 forms 而不是 div。 您可以将 div 更改为表单或将 onSubmit 更改为 onClick，然后将 onClick 放在按钮上。 此外，如果您使用箭头 function 定义 class 方法，则无需在构造函数中将其绑定到 this。 希望有帮助！

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

Answer 2

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

所以替换：

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

和：

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

还要确保将结束的</div>替换为</form>