¿Cómo puedo usar e.preventDefault() con múltiples parámetros? Estoy recibiendo el error:
TypeError: Cannot read properties of undefined (reading 'preventDefault')Con este código:
import React, { useState, useEffect } from "react"; import './App.css'; import axios from './axios.js'; const removeCustomer = (id) => { axios.get(`/customers/delete/${id}`) window.location = "/" } function addCustomer(name, address, e){ e.preventDefault(); console.log("hello"); } function App() { const [customers, setCustomers] = useState([]) const [name, setName] = useState("") const [address, setAddress] = useState("") useEffect(() => { async function fetchData() { const req = await axios.get("/customers"); setCustomers(req.data); } fetchData(); }, []) return ( <> <h1 className="title">All Customers</h1> <div className="customers"> {customers.map((customer) => ( <div onClick={() => { removeCustomer(customer.id) }} key={customer.id} className="customer"> <h3>{customer.name}</h3> <p>{customer.address}</p> </div> ))} </div> <form> <input type="text" placeholder="Name" onChange={(e) => setName(e.target.value)}/> <input type="text" placeholder="Address" onChange={(e) => setAddress(e.target.value)}/> <button type="submit" onClick={() => addCustomer(name, address)}>Add</button> </form> </> ); } export default App;Tengo una pregunta (no se preocupe si no la responde) ¿cómo puedo enviar las dos variables nombre y dirección a mi backend?
Está esperando que el evento provenga de donde está llamando a la función. Pero estás llamando a la función con una función de flecha. Debe pasar el evento para que funcione cuando realiza un clic.
// Your js Code will be like this function addCustomer(name, address, e){ e.preventDefault(); console.log("hello"); } // Your HTML code will be like this <button type="submit" onClick={(e) => addCustomer(name, address, e)}>Add</button>Esto definitivamente debería funcionar.