javascript - 未定义的 handleSubmit 函数登录表单

Question

我正在做一个带有反应的登录表格。我正在使用事件侦听器来提交表单。我创建了一个在表单标记中调用的 handleSubmit 函数，但是由于某种原因它无法访问函数 handleSubmit。它是未定义的。

这是我的代码：

export default function Signin() {
const [formData, setFormData] = useState({
    email: '',
    password: '',
    successMsg: false,
    errorMsg: false,
    Loading: false,
})
//data destructuration
const { email, password, successMsg, errorMsg, Loading } = formData;
//Event handlers
const handleChange = evt =>{
 //console.log(evt);
 setFormData({
     ...formData,
     [evt.target.name] : evt.target.value
 });

 const handleSubmit = evt => {
    evt.preventDefault();
    console.log(formData)
    
};
}    

return (
    
    <div className='signin-background'>
        <div className='row vh-100 px-5'>
            <div className='col-md-5 mx-auto align-self-center' >
                {JSON.stringify(formData)}
                <form  onSubmit={handleSubmit}>
                    <h3 className='title'>Sign In</h3>

                    <div className="form-group">
                        <input onChange={handleChange} value={email} name='email' type="email" className="form-control" placeholder="Enter email" />
                    </div>

                    <div className="form-group">
                        <input onChange={handleChange} value={password} name='password' type="password" className="form-control" placeholder="Enter password" />
                    </div>

                    <div className="form-group">
                        <div className="custom-control custom-checkbox">
                            <input type="checkbox" className="custom-control-input" id="customCheck1" />
                            <label className="custom-control-label" htmlFor="customCheck1">Remember me</label>
                        </div>
                    </div>

                    <button type="submit" className="btn btn-primary btn-block">Submit</button>
                    <p className="forgot-password text-right">
                        Forgot <Link to='/resetPassword'>password?</Link>
                    </p>
                </form>
            </div>
        </div>
    </div>
)
 }

标签： javascriptreactjs