import "./App.css"; import { useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { addUser} from "./features/Users"; function App() { const dispatch = useDispatch(); const userList = useSelector((state) => state.users.value); const [name, setName] = useState(""); const [username, setUsername] = useState(""); return ( <div className="App"> {" "} <div className="addUser"> <input type="text" placeholder="Name..." onChange={(event) => { setName(event.target.value); }} /> <input type="text" placeholder="Username..." onChange={(event) => { setUsername(event.target.value); }} /> <button onClick={() => { dispatch( addUser({ id: userList[userList.length - 1].id + 1, name, username, }) ); }} > {" "} Add User </button> </div> );}Soy nuevo en reaccionar y redux. Después de hacer clic en el botón "Agregar usuario", los nuevos datos de usuario de las entradas en el código se agregarán a la lista de back-end. Quiero que los valores en las secciones de entrada se borren después de hacer clic en el botón "Agregar usuario", pero no sé cómo hacerlo.
debe borrar su estado después de hacer clic en el botón Enviar. por ejemplo: establecer función como =>
const clearData = { setName("") setUsername("") } and pass the func to your onClick event. onClick={clearData}El siguiente código funcionará perfectamente bien.
Simplemente asigne value={name} y value={username} a ambos tipos de entrada respectivamente y cuando haga clic en Add User simplemente clear los datos en both states .
import "./App.css"; import { useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { addUser} from "./features/Users"; function App() { const dispatch = useDispatch(); const userList = useSelector((state) => state.users.value); const [name, setName] = useState(""); const [username, setUsername] = useState(""); return ( <div className="App"> {" "} <div className="addUser"> <input type="text" placeholder="Name..." value={name} onChange={(event) => { setName(event.target.value); }} /> <input type="text" placeholder="Username..." value={username} onChange={(event) => { setUsername(event.target.value); }} /> <button onClick={() => { setName(""); setUsername(""); dispatch( addUser({ id: userList[userList.length - 1].id + 1, name, username, }) ); }} > {" "} Add User </button> </div> );}Puede mantener una variable simple con una lista de campos de formulario y puede actualizar el estado del formulario con la variable cuando necesite borrar los datos del formulario. El siguiente enfoque es útil cuando también necesita agregar campos adicionales.
import "./App.css"; import { useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { addUser} from "./features/Users"; const formFields = { name: '', username: '' }; function App() { const dispatch = useDispatch(); const userList = useSelector((state) => state.users.value); const [params, setParams] = useState(formFields) const handleChange = (e) => { const { name, value } = e.target; setParams({ ...params }, ...{[name]: value}); } const clearForm = () => setParams(formFields); return ( <div className="App"> <div className="addUser"> <input type="text" placeholder="Name..." value={params.name} onChange={(e) => handleChange(e)} /> <input type="text" placeholder="Username..." value={params.username} onChange={(e) => handleChange(e)} /> <button onClick={() => { dispatch( addUser({ id: userList[userList.length - 1].id + 1, ...params }) ); clearForm(); }} > {" "} Add User </button> </div> </div> ) }