Estoy usando react. Tengo 2 entradas que al hacer clic en un botón se ganan dinámicamente. este el codigo:
useEffect(() => { const myFields = fieldsArray.map((field) => { return ( <div key={field} className="col-12 m-auto d-flex"> <input id={field} name={`question${field}`} onChange={handleChangeFields} placeholder='سوال' className="form-control col-4 m-2" /> <input id={field} name={`answer${field}`} onChange={handleChangeFields} placeholder='جواب' className="form-control col-4 m-2" /> </div> ) }) setFields(myFields) }, [fieldsArray])Necesito guardar el valor de 2 entradas juntas en un objeto como este:
[{question : '',answer : ''}]y el valor de la nueva entrada 2 actualizará la matriz anterior de esta manera:
[{question : '',answer : ''}, {question : '',answer : ''}]Puedo guardar el valor de cada entrada por separado así:
const handleChangeFields = (e) => { const { name, value } = e.target setFieldsValue([...fieldsValue, { [name]: value }]) }pero quiero el valor de cada 2 entradas juntos, necesito guardar cada 2 entradas juntas. ¿Cómo puedo hacer eso?
Este es un ejemplo general de cómo creo que puede vincular lo que está haciendo actualmente y agregar la menor cantidad de código nuevo posible. Esto registra el nuevo estado data cuando se hace clic en el botón.
Tener dos estados. Uno para recopilar la información del formulario actualizado ( form ) y otro para la matriz de datos del formulario combinado ( data ).
Tenga un formulario con un único oyente onChange ( delegación de eventos ) para que pueda capturar eventos de todas las entradas a medida que aumentan el DOM. Ese oyente llama a la función handleChange que actualiza el estado del formulario.
Tenga un botón con un oyente onClick que llame a handleClick , que toma el estado del formulario actual y lo agrega al estado de los data .
Sería un poco cauteloso al almacenar JSX en el estado. Debe tener ese map en la return del componente y solo actualizar los datos de campo reales con información básica.
Un último problema: sus entradas no pueden tener la misma id . ids deben ser únicos. Me desharía de ellos por completo.
const { useEffect, useState } = React; function Example() { // Initialise two states. `data` is an array // and `form` is an object const [ data, setData ] = useState([]); const [ form, setForm ] = useState({}); // Add the form data to the `data` array function handleClick() { setData([ ...data, form ]); } // We're using event delegation so we need to // check what element we changed/clicked on // - in this case the INPUT element. We can then // update the form state with the name/value pair of that input function handleChange(e) { const { nodeName, name, value } = e.target; if (nodeName === 'INPUT') { setForm({ ...form, [name]: value }); } } // Just logs the data state after a change useEffect(() => console.log(data), [data]); return ( <form onChange={handleChange}> <input name="question" type="text" /> <input name="answer" type="text" /> <button type="button" onClick={handleClick} >Update form </button> </form> ); }; ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>este problema resuelto para mí:
function App() { const [results, setResults] = useState([{ question: "", answer: "" }]) // handle input change const handleInputChange = (e, index) => { const { name, value } = e.target const list = [...results] list[index][name] = value setResults(list) } // handle click event of the Remove button const handleRemoveClick = (index) => { const list = [...results] list.splice(index, 1) setResults(list) } // handle click event of the Add button const handleAddClick = () => { setResults([...results, { question: "", answer: "" }]) } // handle submit to servers const handlesubmit = () => { // axios console.log(results) } return ( <div className="App"> {results?.map((result, index) => { return ( <div key={index}> <input name="question" value={result.question} onChange={(e) => handleInputChange(e, index)} /> <input name="answer" value={result.answer} onChange={(e) => handleInputChange(e, index)} /> {results.length !== 1 && ( <button onClick={() => handleRemoveClick(index)}> Remove </button> )} {results.length - 1 === index && ( <button onClick={handleAddClick}>add</button> )} </div> ) })} <div style={{ marginTop: 20 }}>{JSON.stringify(results)}</div> <button onClick={handlesubmit}>submit</button> </div> ) } export default App