Reactjs 防止表单提交不起作用

Question

我正在学习一个教程，我正在尝试使用一个在提交时不会重新加载的表单来执行此操作我正在尝试使用 e.preventDefault(); 但是这不起作用并且页面正在重新加载无论如何提交

这是我的代码：

import React from 'react';
import { useState } from 'react';

function Modal() {

    const [Email, setEmail] = useState('');
    const [Fact, setFact] = useState('');
    const [Source, setSource] = useState('');

    const handelSubmit = (e) => {
        e.preventDefault();
        const newFact = {Email, Fact, Source};
        console.log(newFact);
    }

  return (
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add a Fact</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form onsubmit={handelSubmit}>
                    <div class="mb-3">
                        <label for="InputEmail" class="form-label">Email address</label>
                        <input type="email" class="form-control" id="InputEmail" aria-describedby="emailHelp" placeholder="enter your email..." value={Email} onChange={(e) => setEmail(e.target.value)} required></input>
                    </div>
                    <div class="mb-3">
                        <label for="InputFact" class="form-label">Fact</label>
                        <input type="text" class="form-control" id="InputFact" aria-describedby="emailHelp" placeholder="enter your fact..." value={Fact} onChange={(e) => setFact(e.target.value)} required></input>
                    </div>
                    <div class="mb-3">
                        <label for="InputSource" class="form-label">Source</label>
                        <input type="url" class="form-control" id="InputSource" aria-describedby="emailHelp" placeholder="enter your source..." value={Source} onChange={(e) => setSource(e.target.value)} required></input>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-dark">Submit</button>
                    </div>
                </form>
            </div>
            </div>
        </div>
    </div>
  )
}

export default Modal

与教程唯一不同的是我使用了 bootstrap 5 模态，但我认为这不会导致问题

我正在学习本教程：https://www.youtube.com/watch?v=pJiRj02PkJQ 这是该教程源代码的 link：https://github.com/iamshaunjp/Complete-React-Tutorial/blob/lesson-28/dojo-blog/src/Create.js

Answer 1

您在 onsbumit 中有错字。将其更改为 onSubmit。请记住，React 使用的是 JSX，所以尽管代码看起来像 HTML，但实际上是 JavaScript.

Reactjs 防止表单提交不起作用

Reactjs prevent form submission not working

javascript

forms

reload

preventdefault

reactjs