ReactJs 我的 event.preventDefault();不起作用

Question

我尝试在 React js 上创建一个表单，但我不想在提交表单时刷新页面。

我在我的服务器（烧瓶）上进行回调。

当我尝试执行以下操作时：“event.preventDefault();”我对 Flask 服务器的调用不起作用。

这是我的代码：

import { useState } from 'react';


const Form = (props) => {

  const componentDidMount = (event) => {
      event.preventDefault();

    // Simple POST request with a JSON body using fetch
    
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: title })
    };
    
    fetch('http://localhost:5000/add', requestOptions)
    
        .then(response => response.json())
        
        .catch(error => console.log(error))
        
      
  }
  const [title, setTitle] = useState('')
  const [body, setBody] = useState('')


return (
     <div>
        <form onSubmit = {() => componentDidMount()} >

            <label htmlFor="title" className="form-label">Title</label>
                    <input 
                    type="text"
                    className="form-control" 
                    placeholder ="Enter title"
                    value={title}
                    onChange={(e)=>setTitle(e.target.value)}
                    required
                    />

                    <label htmlFor="body" className="form-label">Body</label>
                    <textarea 
                    className="form-control" 
                    placeholder ="Enter body" 
                    value={body}
                    onChange={(e)=>setBody(e.target.value)}
                    required
                    >
                    </textarea>

                    <button 
                    className="btn btn-primary mt-2"
                    >
                    Publish article</button>

                    </form>
    </div>
)}

export default Form;

我不想刷新页面，因为我的回调函数有二分之一，我想处理它，但我无法读取控制台上的错误。

感谢您的帮助！

Answer 1

您还需要通过事件来触发event.preventdefault（）函数

<form onSubmit = {(event) => componentDidMount(event)} >

Answer 2

这是因为您在 form 标签中调用了 componentDidMount 函数。

您只需在 onSubmit 属性中传递函数的引用即可。

<form onSubmit={componentDidMount}>
...
</form>

Answer 3

我不建议使用组件生命周期方法（例如ComponentDidMount）来处理表单提交事件。
您可以创建一个特定的处理程序：

const Form = (props) => {

    const handleSubmit = (event) => {
        event.preventDefault();
        // ...
    }
    // ...


    return (
        <div>
            <form onSubmit={handleSubmit} > 

                {/* // ... */}
            </form>
        </div>
    )
}