Tengo un formulario React con campos de entrada dinámicos que un usuario puede agregar y eliminar campos de entrada. Cuando envío el formulario, registro los valores de cada entrada en una matriz. El problema es que no puedo escribir continuamente en una entrada. Cuando escribo una entrada, solo puedo escribir un carácter y se enfoca. ¿Cómo puedo arreglarlo?
Aplicación.js
import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function App() { const [fields, setFields] = useState([""]); function handleChange(i, event) { const values = [...fields]; values[i] = event.target.value; setFields(values); } function handleAdd() { const values = [...fields]; values.push(""); setFields(values); } function handleRemove(i) { const values = [...fields]; values.splice(i, 1); setFields(values); } function submitHandler(event) { event.preventDefault(); console.log(fields); } return ( <div className="App"> <h1>Hello CodeSandbox</h1> <form onSubmit={submitHandler}> <button type="button" onClick={() => handleAdd()}> Add Input </button> {fields.map((field, idx) => { return ( <div key={`${field}-${idx}`}> <input type="text" placeholder="Enter text" value={field || ""} onChange={(e) => handleChange(idx, e)} /> <button type="button" onClick={() => handleRemove(idx)}> X </button> </div> ); })} <button className="margin-top" type="submit"> Submit </button> </form> </div> ); } export default App;Reemplace su código con este
<div key={`${"asdf"}-${idx}`}> <input type="text" placeholder="Enter text" value={field || ""} onChange={(e) => handleChange(idx, e)} /> <button type="button" onClick={() => handleRemove(idx)}> X </button> </div>he usado un antirrebote de terceros, puedes elegir lo que quieras
código
import React, { useState } from "react"; import AwesomeDebouncePromise from "awesome-debounce-promise"; import ReactDOM from "react-dom"; import "./styles.css"; function App() { const [fields, setFields] = useState([""]); function handleChange(i, event) { const values = [...fields]; values[i] = event.target.value; setFields(values); } function handleAdd() { const values = [...fields]; values.push(""); setFields(values); } function handleRemove(i) { const values = [...fields]; values.splice(i, 1); setFields(values); } const searchAPIDebounced = AwesomeDebouncePromise((event) => { console.log(fields); }, 100); const submitHandler = async (event) => { event.preventDefault(); const result = await searchAPIDebounced(event); }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <form onSubmit={submitHandler}> <button type="button" onClick={() => handleAdd()}> Add Input </button> {fields.map((field, idx) => { return ( <div key={`${idx}`}> <input type="text" placeholder="Enter text" value={field || ""} onChange={(e) => handleChange(idx, e)} /> <button type="button" onClick={() => handleRemove(idx)}> X </button> </div> ); })} <button className="margin-top" type="submit"> Submit </button> </form> </div> ); } export default App;