0
147
VistasCómo pegar varios números y dividir entre todas las entradas
Estoy luchando con la situación actual:
Tengo 1 sola entrada donde pego datos como este:
96 101 115 145 191 276 412 551 511 552
Lo convierto en una matriz y lo guardo en la base de datos.
Me encantaría refactorizarlo en 11 entradas diferentes porque es mucho más fácil de modificar.
¿Cómo podría pegar todos esos números en la primera entrada y llenarlos todos dividiéndolos en el espacio?
Mi primer intento fue este:
import { useState } from "react" const MultipleInputs = () => { const [form, setForm] =useState({}) const handleForm = (e) => { setForm({...form, [e.target.name]:e.target.value}) } const splitOnCopy = (e) => { const data = e.target.value const newArray = data.trim().split(/\s/) setForm({ y1: newArray[0], y2: newArray[1], y3: newArray[2], y4: newArray[3], y5: newArray[4], y6: newArray[5], y7: newArray[6], y8: newArray[7], y9: newArray[8], y10: newArray[9], ttm: newArray[10] }) } return ( <div className="input-container"> <input onPaste={splitOnCopy} onChange={handleForm} value={form.y1} type="text" name="y1"></input> <input onChange={handleForm} type="text" value={form.y3} name="y3"></input> <input onChange={handleForm} type="text" value={form.y4} name="y4"></input> <input onChange={handleForm} type="text"value={form.y5} name="y5"></input> <input onChange={handleForm} type="text" value={form.y6} name="y6"></input> <input onChange={handleForm} type="text" value={form.y7} name="y7"></input> <input onChange={handleForm} type="text" value={form.y8} name="y8"></input> <input onChange={handleForm} type="text" value={form.y9} name="y9" ></input> <input onChange={handleForm} type="text" value={form.y10} name="y10"></input> <input onChange={handleForm} value={form.ttm} name="ttm" type="text"></input> </div> ) } export default MultipleInputsCasi funciona, pero estoy seguro de que debe haber varias formas mejores de lograrlo.
Gracias
2 Respuestas
Responde la pregunta0
Hice un ejemplo de trabajo mínimo:
import { useState } from "react"; function App() { const INPUT_COUNT = 11; const [form, setForm] = useState({}); const handleForm = (e, i) => { setForm({ ...form, [i]: e.target.value }); }; const splitOnCopy = (e) => { const data = e.clipboardData.getData("text/plain"); const newArray = data.trim().split(/\s/g); const newForm = { ...newArray }; setForm(newForm); e.preventDefault(); }; return ( <div className="input-container" style={{ padding: "2rem" }}> <p>96 101 115 145 191 276 412 551 511 552 32</p> {Array.from({ length: INPUT_COUNT }).map((_, i) => ( <input key={i} onPaste={splitOnCopy} onChange={(e) => handleForm(e, i)} value={form[i] || ""} type="text" name={`input_${i}`} ></input> ))} </div> ); } export default App;Esto crea todas las entradas dinámicamente y asigna su índice como su identificación, lo que le permite configurar el recuento de entradas como desee.
0
Un poco mejor:
import React, { useRef, useState } from 'react'; const MultipleInputs = () => { const [form, setForm] = useState({}); const lastRef = useRef(); const handleForm = (e) => { setForm({ ...form, [e.target.name]: e.target.value }); }; const splitOnCopy = (e) => { const data = e.target.value; const newArray = data.split(' '); let formData = {}; newArray.forEach((c, i) => (formData[`y${i + 1}`] = c)); formData['ttm'] = newArray[newArray.length - 1]; setForm(formData); lastRef.current.focus(); }; //96 101 115 145 191 276 412 551 511 552 32 return ( <div className="input-container"> <input onChange={splitOnCopy} value={form.y1} type="text" name="y1"></input> <input onChange={handleForm} type="text" value={form.y3} name="y3"></input> <input onChange={handleForm} type="text" value={form.y4} name="y4"></input> <input onChange={handleForm} type="text" value={form.y5} name="y5"></input> <input onChange={handleForm} type="text" value={form.y6} name="y6"></input> <input onChange={handleForm} type="text" value={form.y7} name="y7"></input> <input onChange={handleForm} type="text" value={form.y8} name="y8"></input> <input onChange={handleForm} type="text" value={form.y9} name="y9"></input> <input onChange={handleForm} type="text" value={form.y10} name="y10"></input> <input ref={lastRef} onChange={handleForm} value={form.ttm} name="ttm" type="text"></input> </div> ); }; export default MultipleInputs;Agregué una referencia a la última entrada para que, después de pegar, el enfoque vaya a la última entrada simulando que el usuario escribe. También puede agregar ref a todos los elementos de entrada y capturar la longitud del valor de entrada para cada componente y cambiar el enfoque al siguiente a medida que el usuario escribe.
Espero que yo puedo ayudarle.