en mi código de reacción cuando intento ejecutar el código, muestra que el evento está en desuso para event.preventDefault(). ¿Alguien puede decirme qué debo hacer?
import React, { useState } from "react"; function App() { const [task, setTask] = useState(""); const [todo, setTodo] = useState([]); function createTodo() { event.preventDefault(); setTodo((oldTodo) => { return [...oldTodo, task]; }); } return ( <div> <h1>Todo App</h1> <form onSubmit={createTodo}> <input type="text" value={task} onChange={(e) => { setTask(e.target.value); }} /> <button type="submit">Click me</button> </form> <ul> {todo.map((todos) => { return <li>{todos}</li>; })} </ul> </div> ); } export default App;ERROR en src\App.js Línea 8:5: Uso inesperado de 'event' no-restricted-globals
No ha convertido el evento en un argumento para createTodo, por lo que se interpreta como global, de ahí la advertencia.
Estás usando dos tipos de eventos aquí. El no obsoleto que usó en este fragmento de código:
onChange={(e) => { // e is event! setTask(e.target.value); }}Para aclarar, el código anterior realmente está haciendo esto:
onChange={(event) => { setTask(event.target.value); }}Pero dado que el objeto de evento se pasa como argumento, puede nombrarlo como desee en la definición de su función:
onChange={(foo) => { // foo is event! setTask(foo.target.value); }} Sin embargo, por razones de legibilidad, es mejor dar al objeto de evento un nombre fácilmente reconocible, como event o e .
Ahora, dado que ya sabe cómo usar el objeto de evento no obsoleto, todo lo que necesita hacer es hacer lo mismo:
function createTodo(e) { e.preventDefault(); setTodo((oldTodo) => { return [...oldTodo, task]; }); }