英文:
Uncaught TypeError: e.preventDefualt is not a function
问题
I'm new to React and js in general and I'm following a crash course on React and got stuck on this error at some point in the course.
This is the error message that I'm getting is for the preventDefault method, which I have used to prevent the page from refreshing.
here is the 2 file concern
import { useState } from "react";export function NewTodoForm({onSubmit}) {const [newItem, setNewItem] = useState("")function handleSubmit(e) {e.preventDefault(); // This line is corrected to preventDefaultif (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-keyreturn (<><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
I tried to use other methods rather than preventDefault, but none of them works, from preventing from refreshing the page.
英文:
I'm new to React and js in general and I'm following a crash course on React and got stuck on this error at some point in the course.
This is the error message that I'm getting is for the preventDefault method, which I have used to prevent the page from refreshing.
here is the 2 file concern
import { useState } from "react"export function NewTodoForm({onSubmit}){const [newItem, setNewItem] = useState("")function handleSubmit(e) {e.preventDefualt()if (newItem === "") returnonSubmit(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-keyreturn (<><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
I tried to use other methods rather than preventDefualt, but none of them works, from preventing from refreshing the page.
答案1
得分: 5
你有一个拼写错误，你的代码是
e.preventDefualt()
它应该是
e.preventDefault()
英文:
You have a typo, your code is
e.preventDefualt()
It should be
e.preventDefault()
答案2
得分: 0
问题出在handleSubmit函数中，其中e.preventDefault()被拼写错误。另外，不要忘记将您的函数导出为"default"。
英文:
The issue is in handleSubmit function where e.preventDefault() has been misspelled. Also don't forget to make "default" export of your function.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论