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

我与本教程唯一不同的是使用引导程序 5 模式，但我认为这不会导致问题

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

Answer 1

你有一个错字onsbumit。将其更改为onSubmit. 请记住，React 使用的是 JSX，因此即使代码看起来像 HTML，但它实际上是 JavaScript。