Estoy tratando de obtener los valores marcados de una casilla de verificación y luego mostrarlos en un campo. Tengo dos archivos, el índice que tiene el campo de entrada y luego la casilla de verificación se realiza en un modal que es un componente diferente, el selectlanguage . Quiero que cuando un usuario marque una o más casillas de verificación, los valores aparezcan en la entrada y, cuando no estén marcados, el valor abandone el campo.
Actualmente, lo que puedo lograr es solo un valor único que aparece en el campo de entrada.
Aquí hay un fragmento del código.
índice.js
import React, { useState } from "react"; import SelectLanguage from "../../components/modal/selectLanguage"; const index = () => { const [chosenLanguage, setChosenLanguage] = useState([]); function checkLanguage(e) { setChosenLanguage(e.target.name); }; <label className="relative block p-3 border-b-2 border-gray-200 w-full" for="languages"> <span for="languages">languages</span> <input id="languages" type="text" placeholder="Spanish, Arabic" autoComplete="off" onClick={languageShowModal} value={chosenLanguage} /> </label> } export default index;seleccionaridioma.js
import { useState } from "react"; export default function SelectLanguage({ open, handleClose, checkLanguage }) { const handleCheckbox = (e) => { alert(e.target.name); }; return open ? ( <div> <label> <input type="checkbox" name="spanish" onChange={checkLanguage} /> <span>spanish</span> </label> <label> <input type="checkbox" name="spanish" onChange={checkLanguage} /> <span>french</span> </label> <label> <input type="checkbox" name="spanish" onChange={checkLanguage} /> <span>arabic</span> </label> </div> ) : ( "" ); }No me queda exactamente claro cómo tiene las cosas conectadas, pero una buena estrategia es reflejar el estado del DOM en su estado React ( componentes controlados ) y luego tener una forma de mostrar ese estado. En su caso, desea almacenar el estado de un montón de casillas de verificación y una forma de hacerlo es con un mapa.
export const MyComponent = () => { const [ chosenLanguages, setChosenLanguages ] = useState({}) const checkLanguage = (e) => { setChosenLanguages(prev => ({ ...prev, [e.target.value]: e.target.checked, })) } const showLanguages = () => { return Object.entries(chosenLanguages) .filter(([_, checked]) => checked) .map(([name, _]) => name) .join(', ') } return ( <input value={showLanguages()} /> ) } En lugar de una matriz, los chosenLanguages son un mapa de nombres de idiomas en su estado marcado, por ejemplo:
{ arabic: true, spanish: false, french: true, }Cuando haya almacenado su estado de esta manera, puede transformarlo de la forma que desee cuando renderice.