未捕获的类型错误：e.preventDefualt 不是函数

Question

我对 React 和 js 总体来说是新手，我正在学习 React 速成课程，并在课程中的某个时刻陷入了这个错误。这是我收到的错误消息是针对 PreventDefault 方法的，我用该方法来阻止页面刷新。

这是 2 个文件问题

import { useState } from "react"

export function NewTodoForm({onSubmit}){
    const [newItem, setNewItem] = useState("")
  function handleSubmit(e) {

    e.preventDefualt()
    if (newItem === "") return
    onSubmit(newItem)
    
    setNewItem("")
  }
return (
    <form className="new-item-form" onSubmit={handleSubmit}>
        <div className="form-row">
          <label htmlFor="item"> New Item</label>
          <input value={newItem} onChange={e => setNewItem(e.target.value)} type="text" id="item"></input>
        </div>
        <button className="btn" >
          Add
        </button>
      </form>
)
}

import "./styles.css"
import { useState } from "react"
import { NewTodoForm } from "./NewTodoForm"

function App() {


  const [todos, setTodos] = useState([])
  

  function addTodo(title) {
    setTodos(currentTodos => {
      return [
        ...currentTodos,
        { id: crypto.randomUUID(), title, completed: false },
      ]
    })
  }
  console.log(todos)
  return (
    
    <>
      <NewTodoForm onSubmit={addTodo}/>
    
      <h1 className="header">
        Todo List
      </h1>
     
      
      <ul  className="list">
      {todos.map(todo => {
        // eslint-disable-next-line react/jsx-key
        return (
          <> 
          <li key={todo.id}>
          <label>
            <input type="checkbox"  checked={todo.completed}/>
            {todo.title}

          </label>
          <button className="btn btn-danger">
            delete
          </button>

        </li>
        </>
        )
        
      })}
      
      </ul>
    </>



  )
}

export default App

我尝试使用其他方法而不是 PreventDefualt，但它们都不起作用，无法阻止刷新页面。

Answer 1

你有一个错字，你的代码是

e.preventDefualt()

它应该是

e.preventDefault()