Cómo manejar el formulario de selección múltiple en ReactJS

Hola usuario de nuestro sitio, encontramos la solución a tu interrogante, has scroll y la hallarás aquí.

Solución:

Según mi entendimiento básico, cuando tratas de manejar un Seleccionar elemento de formulario en reactJS generas un objeto en HTMLOptionsCollection.

La raíz fundamental de los métodos y propiedades de este objeto es e.objetivo.opciones.

Sus elementos se almacenan en la propiedad e.target.options.value.

Para acceder a un valor almacenado en el objeto options.value, puede utilizar el [i] valor de bucle, por lo tanto, e.target.options[i].valor propiedad.

Las opciones de e.target[i].value devuelve tipos de datos de cadenas.

Siguiendo lo que acabo de decir, asumo que los objetos se almacenan respetando una convención de aumento de números de la siguiente manera:

e.objetivo.opciones[i].valor donde [i] : valor, [i +1] : valor (…)…

Mediante el uso de e.target.options[i].seleccionado puede controlar si hay un valor almacenado en una ubicación específica.

e.objetivo.opciones[i].selected le devuelve un valor booleano, útil para manejar el flujo de código.

Depende de ti ahora.

---

Aquí mi código para manejar formularios de selección múltiple en JSX con código javascript:

// Create the React Component


    class ChooseYourCharacter extends React.Component {

          // Set the constructor
          constructor(props) 
            super(props);
            this.state = value: 'coconut';

            // bind the functions
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
          

          // extract the value to fluently setState the DOM
          handleChange (e) 
            var options = e.target.options;
            var value = [];
            for (var i = 0, l = options.length; i < l; i++) 
              if (options[i].selected) 
                value.push(options[i].value);
              
            
            this.setState(value: value);
          

          // display in client-side the values choosen
          handleSubmit() 
             alert("you have choose :" + this.state.value);

         


    (...)

Actualmente estoy aprendiendo React y noté este mismo código en el sitio reactjs.org. A continuación se muestra mi solución para manejar múltiples opciones seleccionadas.

1. en el constructor, use un array para el valor inicial para 'valor' en el estado
2. en el método handleChange, convierta las opciones seleccionadas del destino del evento (HTMLOptionsCollection - array-como) a un array usando Array.from(), y use una función de mapeo para obtener el valor de cada elemento

class ChooseYourCharacter extends React.Component 

      constructor(props) 
        super(props);
        //this.state = value: 'coconut';
        this.state = value: ['coconut'];

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      

      handleChange(event) 
        //this.setState(value: event.option);
        this.setState(value: Array.from(event.target.selectedOptions, (item) => item.value));
      

      handleSubmit(event) 
        alert('Your favorite flavor is: ' + this.state.value);
        event.preventDefault();
      

      render() 
        return (
          

            
              Pick your favorite La Croix flavor:
              
                Grapefruit
                Lime
                Coconut
                Mango
              
            
            
          
        );
      
    
    ReactDOM.render(
             ,
             document.getElementById('root')
    )

A continuación se muestra cómo obtener las opciones seleccionadas por el usuario mediante un componente funcional y el enlace useState en lugar de un componente de clase:

import React,  useState  from "react";

const ChooseYourCharacter = function(props) 
    const [selectedFlavors, setSelectedFlavors] = useState([]);

    const handleSelect = function(selectedItems) 
        const flavors = [];
        for (let i=0; i
             handleSelect(e.target.selectedOptions)>
                Grapefruit
                Lime
                Coconut
                Mango
            
        
    );
;

export default ChooseYourCharacter;

Puedes añadir valor a nuestra información añadiendo tu experiencia en las anotaciones.

---

---

Utiliza Nuestro Buscador