表单提交重新呈现页面以做出反应

Question

我在 React 组件中有一个表单。

当我点击提交按钮时，我调用了 signin()。在 signin() 中，出现错误，因为我可以在 chrome 控制台中看到输出，但它一闪而过，我无法阅读。然后页面刷新，错误消息从控制台消失。

为什么我的表单会重新呈现页面？以及如何抑制重新渲染以便读取错误？

这是我的组件：

import React, { Component } from 'react';
import './login.scss';
import axios from '../axios/axiosInstance';

class Login extends Component {

    constructor() {
        super();

        this.usernameRef = React.createRef();
        this.passwordRef = React.createRef();
    }

    signin() {
        axios.get('/auth', {headers: {
            username: this.usernameRef.current.value,
            password: this.passwordRef.current.value}}).then(response => {
                console.log('response=', response);
            }).catch(err => {
                console.log('err=', err);
            });
    }

    render() {

        return (
            <div className="login-container">
                <form onSubmit={this.signin}>
                    <div className="flex-row-end">
                        <div className="form-element flex-column-end">
                            <input type="text"
                                placeholder="Username or email"
                                name="username"
                                ref={this.usernameRef}
                                required />
                        </div>
                        <div className="form-element flex-column-end">
                            <input type="password"
                                placeholder="Password"
                                name="password"
                                ref={this.passwordRef}
                                required />
                        </div>
                        <div className="login-submit">
                            <button className="submit-login-button" type="submit"><i className="fas fa-sign-in-alt">&nbsp;&nbsp;&nbsp;</i>Sign In</button>
                        </div>
                    </div>
                </form>
            </div>
        );
    }
};

export default Login;

如您所见，在 signin() 中，我使用 axios 向我的后端发送带有用户凭据的请求。在后端，日志显示没有收到请求的记录。因此，错误一定是在发送请求之前发生的。但是我需要一种方法来抑制页面的重新呈现，以便我可以看到错误消息是什么。

非常感谢。

Answer 1

更改 signin 的签名以获取表单提交事件，您需要阻止对其的默认操作。这样可以防止页面重新加载。

signin(e) {
  e.preventDefault();
  ...

Answer 2

错误告诉您来自组件的引用尚未定义。因为方法在用作函数时未绑定到 this：

 <form onSubmit={e => this.signin(e)}>

然后把 e.preventDefault() 放在 signin(e) 里面，防止提交表单后闪烁。

Answer 3

如果我没记错的话 axios 会使 http 请求异步，所以你可能必须使用 event.persist() if this is not the case, preventDefault() should work as they mentioned in the answers above, also it is recommended to call the api in the componentDidMount()

表单提交重新呈现页面以做出反应

form submit re-renders page in react

forms

submit

rerender

reactjs