Estoy tratando de completar previamente los campos del formulario, que se replican, a partir de los campos que ya están llenos. Al hacer clic en el botón "Agregar campos", los campos se replican. Pero quiero que se completen previamente con los datos completados en los campos ya existentes.
¿De dónde puedo obtener los valores de entrada?
import './style.css'; export default function App() { const [inputFields, setInputFields] = useState([{ name: '', age: '' }]); const addFields = (e) => { e.preventDefault(); let newField = { name: "", age: '' }; setInputFields([...inputFields, newField]); }; const handleFormChange = (index, e) => { let data=[...inputFields]; data[index][e.target.name]=[e.target.value]; setInputFields(data); } return ( <div> <form> {inputFields.map((input, index) => { return ( <div key={index}> <input type="text" name="name" placeholder="Enter name" value={input.name} onChange={(e)=>handleFormChange(index, e)} /> <input type="number" name="age" placeholder="Enter Age" value={input.age} onChange={(e)=>handleFormChange(index, e)} /> <br /> <br /> </div> ); })} <button onClick={addFields}>Add Field</button> <br /> </form> </div> ); }```Deberá realizar un seguimiento de los cambios en input con un controlador onChange .
Además, no está configurando valores de los últimos campos de entrada en ningún lugar para poder duplicarlos. El siguiente código podría funcionar como esperas:
const { useState } = React; function App() { const [inputFields, setInputFields] = useState([{ name: '', age: '' }]); const addFields = (e) => { e.preventDefault(); const temp = inputFields.slice() , length = temp.length - 1 , { name, age } = temp[length] // Set value from last input into the new field let newField = { name, age } setInputFields([...temp, newField]) } , handleChange = (index, event) => { const temp = inputFields.slice() // Make a copy of the input array first. inputFields[index][event.target.name] = event.target.value // Update it with the modified values. setInputFields(temp) // Update the state. }; return ( <div> <form> {inputFields.map((input, index) => { return ( <div key={index}> <input onChange={e => handleChange(index, e)} value={input.name} type="text" name="name" placeholder="Enter name" /> <input onChange={e => handleChange(index, e)} value={input.age} type="number" name="age" placeholder="Enter Age" /> <br /> <br /> </div> ); })} <button onClick={addFields}>Add Field</button> <br /> </form> </div> ); } ReactDOM.render( <App />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>Debe establecer la propiedad de value en el campo de entrada para completar, por ejemplo:
<input value={input.name} type="text" name="name" placeholder="Enter name" />