e.preventDefault() 不会阻止 React 中的页面重新加载

Question

我正在使用preventDefault()但即使这样页面也会重新加载。 下面的代码看起来类似于ReactJS 表单提交 preventdefault not working 。 我还尝试了React onClick 和 preventDefault() 链接刷新/重定向中提到的stopProgation()和nativeEvent.stopImmediatePropogation() ？ 但他们也没有帮助。 有什么我想念的吗？

提前致谢。

class CreateMember extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        var handleSubmit = (e) => {
            e.preventDefault();
            console.log('Event: Form Submit');
        };

        return (
            <div>
                <Form onSubmit={this.handleSubmit}>
                    <Form.Row>
                        <Form.Group as={Col} controlId="mid">
                            <Form.Label>Member ID</Form.Label>
                            <Form.Control required type="id" />
                        </Form.Group>
                        <Form.Group  as={Col} controlId="joiningDate">
                            <Form.Label>Joining Date</Form.Label>
                            <Form.Control required type="date" />
                        </Form.Group>
                    </Form.Row>
                    <Button variant="primary" type="submit">
                        Create
                    </Button>
                </Form>
            </div>
        );
    }
}

Answer 1

您没有将“this.handleSubmit”定义为 class 方法。 相反，您正在定义一个变量。 “this.handlesubmit”未定义。 将其定义为 class 方法，在 render() 之外没有任何变量声明。

您也不希望在 render 中定义任何像这样的事件处理程序，因为它们不需要在每次调用 render() 时都重新声明。

class CreateMember extends React.Component {
    constructor(props) {
        super(props);
    }
    handleSubmit = (e) => {
            e.preventDefault();
            console.log('Event: Form Submit');
    };
    render() {
        return (
            <div>
                <Form onSubmit={this.handleSubmit}>
                    <Form.Row>
                        <Form.Group as={Col} controlId="mid">
                            <Form.Label>Member ID</Form.Label>
                            <Form.Control required type="id" />
                        </Form.Group>
                        <Form.Group  as={Col} controlId="joiningDate">
                            <Form.Label>Joining Date</Form.Label>
                            <Form.Control required type="date" />
                        </Form.Group>
                    </Form.Row>
                    <Button variant="primary" type="submit">
                        Create
                    </Button>
                </Form>
            </div>
        );
    }
}