Este es mi objeto:
const [opportunity, setOpportunity] = useState({ name: '', description: '', experience: '', });Quiero almacenarlo en la propiedad de experiencia de oportunidad como una cadena separada por comas. Así por ejemplo: 'experiencia_1,experiencia_2,experiencia_3'.
Pero cuando escribo en el campo de entrada, quiero poder tener espacio entre las palabras. Así por ejemplo: experiencia_1 experiencia_2 experiencia_3
este es mi código para el campo de entrada:
<InputField type='text' value={opportunity.experience.split(',').join(' ')} // i think i need changes here onChange={(e) => setOpportunity({ ...opportunity, experience: e.currentTarget.value.split(" ").filter(x => x !== '').toString() })} // i think this works label={"Experiences"} />¿Alguna ayuda, chicos?
Reemplace .filter(x => x !== '') con .replace(/\s+/g, " ") y colóquelo antes de llamar al método .split() . Esto reemplazará varios espacios con un solo espacio y evitará que el usuario ingrese en más de un espacio a la vez, mientras le permite cambiar el contenido de su componente InputField . Recuerde, .filter() funciona en una copia clonada de la cadena, mientras que .replace() funciona en la propia cadena, que en este caso es el valor objetivo actual del evento.
Ahora debería funcionar según lo previsto.
Al igual que:
<InputField type="text" value={opportunity.experience .split(",") .map((x) => x.trim()) // Added .trim() to keep consistent spacing... .join(" ")} // ...before joining onChange={(e) => { setOpportunity({ ...opportunity, experience: e.currentTarget.value .replace(/\s+/g, " ") // If you try to use .filter() here, it won't work .split(" ") .toString(), }); }} label={"Experiences"} /> También encadené una operación de recorte en cada valor de la propiedad de estado con .map() para mantener el espaciado constante durante la presentación, en caso de que la propiedad de estado se inicializara con muchos espacios entre cada valor de experiencia.
Aquí hay un ejemplo actualizado de mi respuesta anterior usando useEffect para actualizar el estado según el valor de entrada. Esto mantiene separados el valor de entrada y el valor de estado.
import React from "react"; export default function App() { return ( <div className="App"> <MyComponent /> </div> ); } const MyComponent = () => { const [opportunity, setOpportunity] = React.useState({ name: "", description: "", experience: [] }); const [experienceValue, setExperienceValue] = React.useState(""); React.useEffect(() => { const experience = experienceValue.split(" ").filter((x) => x !== ""); setOpportunity({ ...opportunity, experience }); }, [experienceValue, opportunity]); const handleInput = (e) => { setExperienceValue(e.currentTarget.value); }; return ( <> <input type="text" value={experienceValue} onChange={handleInput} /> <br /> {JSON.stringify(opportunity.experience)} </> ); };