Abandono con múltiples límite de selección -- javascript campo con arrays campo con reactjs campo con semantic-ui-react camp Relacionados El problema

Dropdown with multiple selection limit


1
vote

problema

Español

i relativamente nuevo en React y Semantic UI también. Hay un componente llamado Dropdown con un botón multiple y selection , que permite seleccionar varios elementos.

En la salida, mi estado se ve así:

  const selectedItems = [    {key: 1, value: 1, text: 'Item 1'},    {key: 2, value: 2, text: 'Item 2'},    {key: 3, value: 3, text: 'Item 3'}, ];   

¿Cómo puedo configurar el límite de la cantidad de elementos?

Muchas gracias

Original en ingles

I relatively new to React and Semantic UI as well. There is a component called Dropdown with a props multiple and selection, which allows to select multiple items.

On the output my state looks like this:

const selectedItems = [    {key: 1, value: 1, text: 'Item 1'},    {key: 2, value: 2, text: 'Item 2'},    {key: 3, value: 3, text: 'Item 3'}, ]; 

How can I do setup limit of N amount of elements?

Many thanks

           

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Bueno de acuerdo con https: //react.semantic- ui.com/modules/dropdown#dropdown-example-multiple-selection Debe crear un componente controlado, lo que significa que se enlazará value={this.state.selectedItems} , se enlazará onChange={(e,data) => { this.handleChange(e,data )}6 y en su código

  onChange (e, data) {   const currentItems = this.state.selectedItems    if (currentItems.length <= MAX_SELECTION ) {     currentItems.push(data)      this.setState({       selectedItems: currentItems     })   } }   

Este se ajustará al componente controlado que le permitirá controlar el estado por sí mismo, y limitará el estado de cambio, probablemente deberá manejar también la eliminación de elementos del estado dentro de este evento ONCHANGE.

 

Well according to https://react.semantic-ui.com/modules/dropdown#dropdown-example-multiple-selection you need to create controlled component, which means you will bind value={this.state.selectedItems} then you will bind onChange={(e,data) => { this.handleChange(e,data )} and in your code

onChange (e, data) {   const currentItems = this.state.selectedItems    if (currentItems.length <= MAX_SELECTION ) {     currentItems.push(data)      this.setState({       selectedItems: currentItems     })   } } 

this will crate controlled component which will allows you to control state by yourself, and you will limit changing state, probably you will need to also handle removing items from state inside this onChange event.

 
 
   
   
1
 
vote

La opción Semantic UI React proporciona una función llamada como onAddItem . Tendrá que usar la tecla de datos onChange={(e,data) => { this.handleChange(e,data )}10 y hacer algo así:

  Mono111  

Enlace de documentación

 

The Semantic UI React Dropdown option provides a function called as onAddItem. You will have to use the value data key and do something like this:

const onAddItem = (event, data) => {      1.Fetch the state of the selected values, stored in the value key     2. Check if the limit is greater than 2     3. If the condition is met, then add     4. Else, show an error  } 

Documentation Link

 
 
1
 
vote

Me gustaría sugerir otro enfoque. Establezca USESTATE directamente al valor desplegable.

  Mono2  
  Mono3  
 

I would like to suggest another approach. set useState directly to the dropdown value.

import React, { useState } from 'react';  import { Dropdown } from 'semantic-ui-react';    const MAX_FRUITS_SELECTION = 3;    const FruitsSelect = () => {    const [fruitId, setFruitId] = useState([]);      const optionsFRUITSFake = [      { key: 1, value: 1, text: 'Orange' },      { key: 2, value: 2, text: 'Lemon' },      { key: 3, value: 3, text: 'Apple' },      { key: 4, value: 4, text: 'Banana' },      { key: 5, value: 5, text: 'Melon' },      { key: 6, value: 6, text: 'Pineapple' }    ];      const handleDropFilterFruit = (e: any, data?: any) => {      if (data.value.length <= MAX_FRUITS_SELECTION) {        setFruitId(data.value);      }    };      return (      <Dropdown        placeholder="Select Fruits"        onChange={handleDropFilterFruit}        value={fruitId}        fluid        multiple        selectOnNavigation={false}        search        selection        options={optionsFRUITSFake}      />    );  };    const rootElement = document.getElementById("root");  ReactDOM.render(    <React.StrictMode>      <FruitsSelect />    </React.StrictMode>,    rootElement  );
<!DOCTYPE html>  <html lang="en">  <body>    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>   <div id="root"></div>  </body>  </html>
 
 
 
 
0
 
vote

Estoy publicando mi solución aquí. Probablemente sea más corto y simple.

Al principio, guarde los valores en el estado (preferiblemente estado REDUX) después de cada CAMBIO. El estado de reacción también lo haría bien. Luego, hágalo deshabilitado cuando se alcance una cierta matriz del valor.

  Mono4  
 

I'm posting my workaround here. It's probably more short and simple.

At first, save the values in the state (preferably redux state) after every onChange. React state also would do fine. Then, make it disabled when a certain array length of the value is reached.

const districtData = ['Dhaka', 'Bagerhat', 'Bandarban',  'Barguna', 'Barishal', 'Bhola']  const [districtValue, setDistrictValue] = useState();  <Dropdown onChange={async (e, { name, value }) => {setDistrictValue(value)}} options={districtData.map((currentValue, index) => {     return {     key: `${currentValue}`,     value: `${currentValue}`,     text: `${currentValue}`,     disabled: districtValue.length > 2 ? true : false  } // Do other things here // Max 3 values here, then options will be disabled.  // Will be live again if any selected options are less than 3 here                  /> 
 
 

Relacionados problema

3  ¿Cómo puedo hacer una pestaña de reacción semántica, haga clic en Use un enrutador de reacción NAVLINK para actualizar la URL?  ( How can i make semantic ui react tab click use a react router navlink to update ) 
Estoy usando el componente de la pestaña semántica de la UI y tengo diferentes componentes en el panel de cada pestaña. Cuando haga clic en una pestaña, me gu...

0  ¿Cómo abrir una barra de colapso en ONCLICK de un icono en otro componente?  ( How to open a collapse bar by onclick of an icon in another component ) 
Tengo un componente var options = new FileUploadOptions(); options.fileKey="file"; options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1); options.mim...

2  Reaccionar datos de red de datos Personalizado Trabajo con selector de fecha de calendario de UI semántico (DateInPut)  ( React data grid custom editor work with semantic ui calendar date picker datein ) 
Estaba tratando de implementar un editor personalizado para una fila en mi cuadrícula de datos de reacción que deseo dejar que la entrada del usuario sea de u...

1  Reaccionar: La paginación no funciona sin problemas  ( React pagination is not working smoothly ) 
Estoy trabajando en la paginación en reacción. Estoy recuperando los datos del servidor en línea a través de la API. La API fue construida en loopback. Tengo ...

0  Cómo devolver a reaccionar niño que abre la barra lateral no dentro del componente de la barra lateral  ( How to return reactjs child that opens sidebar not within sidebar component ) 
Estoy usando Semantic-UI-REACT y Semantic-Ui para escribir una aplicación web. La página en la que estoy trabajando es en su mayoría estática, pero quiero ree...

1  UI semántico reacciona: cómo mover el botón de izquierda a derecha  ( Semantic ui react how to move button from left to right ) 
Estoy usando UI semántico reaccionar. Incluí el botón de reacción de UI semántico, pero por defecto se muestra a la izquierda, quiero mostrarlo a la derecha. ...

1  Reaccionar: Cómo deshabilitado Botón Siguiente  ( React how to disabled next button ) 
Estoy trabajando en la paginación. Tenemos dos botones en la aplicación Next y Prev . Estoy mostrando 5 registros en cada página, quiero deshabilitar el bo...

0  Mapa del mapa se rinde uno encima del otro  ( Mapbox map renders on top of each other ) 
Estoy usando las pestañas de reacción-ui para comprar mapas usando MAUTBOX. Tengo cuatro pestañas A, B, C y D. Cuando la página se carga, veo el mapa que trab...

8  ¿Cómo enfocar automáticamente un campo de entrada en Semantic-UI-REACT?  ( How to autofocus an input field in semantic ui react ) 
Estoy teniendo un momento difícil de enfocar un campo de entrada con reacción semántica. El Documentación no parece incluir un ^ {}> @Directive({ selector...

2  ¿Cómo recuperar la llave en un menaje semántico de UI-REACT?  ( How to retrieve the key into a semantic ui react dropdown ) 
Tengo una pequeña pregunta sobre reaccionar menús desplegables. Puedo extraer los valores dentro del menú desplegable, pero también necesito la clave, porqu...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos