es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Manejar la selección de botones de opción con el evento onChange.

14 Jul, 2023 Programación

Tengo el siguiente código:

let checkId = -1;

const checkChange= e => {
    checkId = e.target.id;
}

{ data.map(param=> (
    

        // paramd es un entero 1, 2, 3... etc., por lo que está almacenando correctamente el valor deseado.
        
        
    

))}

Lo que quiero hacer es manejar el atributo “checked” y mantener solo una entrada seleccionada, para que cuando marque otra, la entrada anterior pierda la selección y la seleccionada se marque como seleccionada.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para manejar el atributo checked y mantener solo una entrada seleccionada, puedes modificar la función checkChange de la siguiente manera:

    const checkChange = e => {
  const newCheckId = e.target.id;
  setData(data.map(param => ({
    ...param,
    checked: param.Id == newCheckId
  })));
}

    En este código, estamos utilizando el método Array.map para crear un nuevo array de objetos, donde cada objeto representa un parámetro de la matriz de datos. Para cada objeto, establecemos el atributo checked como true si el valor de param.Id es igual al id del input clickeado, y como false en caso contrario.

    Para realizar un seguimiento de la entrada seleccionada, puedes almacenar la matriz de datos en una variable de estado utilizando el gancho useState, de esta manera:

    const [data, setData] = useState([
  { Id: 1, Name: 'Opción 1', checked: false },
  { Id: 2, Name: 'Opción 2', checked: false },
  { Id: 3, Name: 'Opción 3', checked: false },
]);

// Aquí va la función checkChange

    Con esta configuración, puedes utilizar el atributo checked de los elementos input para controlar su apariencia, de esta forma:

    {data.map(param => (
  <div classname="form-check form-check-inline" key="{param.Id}">
    <input classname="form-check-input" type="radio" name="{'radio'" +="" param.id}="" id="{param.Id}" value="{data.Name}" onchange="{checkChange}" checked="{param.checked}">
    <label classname="form-check-label" htmlfor="{param.Id}">
      {param.Name}
    </label>
  </div>
))}

    Ten en cuenta que estamos utilizando el atributo htmlFor en lugar de for en el elemento label, como lo requiere JSX. Además, estamos estableciendo una clave única en cada elemento div para evitar advertencias de React.

Comments are closed.