J'essaie de pouvoir sélectionner plusieurs valeurs différentes dans une liste déroulante que j'ai créée. Donc, le code suivant montre en fait les noms des personnes, mais j'aimerais pouvoir en sélectionner plusieurs.
<Form.Group controlId="exampleForm.ControlSelect4">
<Form.Label> Names </Form.Label>
<Form.Control as="select" value={this.state.selectedNames}
onChange={this.updateTable}>
{this.state.names.map((name) => <option key={name.value} value={name.value}> {name.display } </option>)}
</Form.Control>
</Form.Group>
3 Réponses :
C'est similaire à la définition d'une valeur unique, mais à la place, la valeur est un tableau au lieu d'une chaîne ou d'un nombre.
Tout d'abord, vous devez changer ce que font la valeur et la fonction onChange. Pour la valeur, définissez l'état par défaut en tant que tableau. Pour le onChange , nous allons le définir où chaque fois que l'élément est vérifié, il définit un nouvel état comme ceci:
javascript p>
state = {
selectedNames:[]
}
onChange = (e) => {
e.preventDefault()
this.setState(prevState => ({selectedNames: [...prevState.selectedNames, e.target.value]})
}
J'espère que cela vous aidera!
(Je suppose que vous utilisez react-bootstrap )
Vous devrez passer un autre accessoire à Form.Control pour spécifier que vous souhaitez que votre sélection autorise plusieurs sélections. Vous pouvez le faire soit en tant que multiple = {true} , soit en tant que raccourci multiple (les deux sont équivalents).
Cet exemple dans leur documentation utilise une sélection multiple, qui pourrait être utile.
J'ai assemblé ce sandbox < / a> qui pourrait illustrer comment l'utiliser.
La gestion de l'état avec react peut être difficile. Les formulaires sont notoirement difficiles car ils impliquent beaucoup d’états internes.
onChange n'est pas déclenché. Je ne sais pas pourquoi cela se produit ici L'événement doit être ajouté à l'option individuelle, la sélection multiple prend pas mal de lignes à implémenter. Voici un extrait de code uniquement pour les sections qui pourraient vous intéresser. Je n'utilise aucun contrôle tiers comme vous pouvez le voir.
import React, { useState, useCallback, useRef } from 'react'
import PropTypes from 'prop-types'
import { useClickOutside } from '../../utils'
import InputBase from '../InputBase'
import Pills from './Pills'
import MultiSelection from './MultiSelection'
import MultiSelectStyle from './MultiSelectStyle'
import SelectIcon from './SelectIcon'
import { optionsType, valuesType } from './optionsType'
import toggleValueInOptions from './toggleValueInOptions'
import valueToItems from './valueToItems'
import SelectionSummary from './SelectionSummary'
/**
* @memberof MultiSelect
* @param {Object} _ Props
* @param {elementType} _.Style Style component
* @param {string} _.name Input name
* @param {valueType[]} _.value Input value of array
* @param {func} _.onChange Value change event
* @param {optionsType[]} _.options Options array
* @param {elementType} _.Selection=MultiSelection Component for dropdown selection
* @param {bool} _.disabled=false Input disabled flag
* @param {bool} _.width=auto Input width
* @param {string} _.placeholder Input placeholder
* @param {elementType} _.DropdownIcon=DropdownIcon Compoent for dropdown icon component
* @param {number} _.pillVisibleMax Max pill displayed
* @param {elementType} _.Summary=SelectionSummary Component for dropdown summary
*/
const MultiSelect = ({
Style, name, value, options, onChange,
Selection, disabled, width, placeholder,
DropdownIcon, pillVisibleMax, Summary,
...props
}) => {
const [focus, setFocus] = useState(false)
const onExpand = useCallback(() => {
if (!disabled) setFocus(true)
}, [disabled])
const onCollapse = useCallback(() => { setFocus(false) }, [])
const ref = useRef()
useClickOutside({ ref, handler: () => { onCollapse() } })
const onSelect = useCallback(v => {
const e = {
target: {
name,
value: toggleValueInOptions(value, v, options)
}
}
onChange(e)
}, [name, value, options, onChange])
const onClear = useCallback(() => {
const e = { target: { name, value: [] } }
onChange(e)
}, [name, onChange])
const after = <DropdownIcon focus={focus} onExpand={onExpand} onCollapse={onCollapse} />
const phText = value.length ? '' : placeholder
const vText = (value.length > pillVisibleMax) ? `${value.length} Selected` : ''
return (
<Style ref={ref}>
<InputBase
value={vText}
placeholder={phText}
disabled={disabled}
readOnly
after={after}
onFocus={onExpand}
width={width}
{...props}
/>
{!vText && (
<Pills
items={valueToItems(value, options)}
onSelect={onSelect}
disabled={disabled}
/>
)}
{focus && (
<Selection
value={value}
options={options}
onSelect={onSelect}
onClear={onClear}
Summary={Summary}
/>
)}
</Style>
)
}
MultiSelect.propTypes = {
Style: PropTypes.elementType,
name: PropTypes.string,
value: valuesType,
options: optionsType,
onChange: PropTypes.func,
Selection: PropTypes.elementType,
disabled: PropTypes.bool,
width: PropTypes.string,
placeholder: PropTypes.string,
DropdownIcon: PropTypes.elementType,
pillVisibleMax: PropTypes.number,
Summary: PropTypes.elementType
}
MultiSelect.defaultProps = {
Style: MultiSelectStyle,
name: '',
value: [],
options: [],
onChange: () => { },
Selection: MultiSelection,
disabled: false,
width: '',
placeholder: '',
DropdownIcon: SelectIcon,
pillVisibleMax: 99,
Summary: SelectionSummary
}
export default MultiSelect
Les éléments onSelect et onClear peuvent être fournis par parent / self composant,
const toggleValueInOptions = (value, key, options) => {
if (!value) return []
const values = value.slice()
const index = values.indexOf(key)
if (index >= 0) {
values.splice(index, 1)
} else {
values.push(key)
}
if (!options) return values
return options.reduce((acc, option) => {
if (values.includes(option.value)) {
acc.push(option.value)
}
return acc
}, [])
}
export default toggleValueInOptions
et une fonction utilitaire toggleValueiInOptions
const onSelect = useCallback(v => {
const e = {
target: {
name,
value: toggleValueInOptions(value, v, options)
}
}
onChange(e)
}, [name, value, options, onChange])
const onClear = useCallback(() => {
const e = { target: { name, value: [] } }
onChange(e)
}, [name, onChange])
Pour votre information, ceci est le code complet du parent MultiSelect.
<div className="_action">
<span
role="button"
aria-pressed="false"
tabIndex={0}
onClick={() => { onClear() }}
>
Clear Selection
</span>
</div>
{options.map(option => (
<div
role="presentation"
className="_item"
key={option.value}
onClick={() => { onSelect(option.value) }}
>
<Checkbox value={isChecked(option, value)} />
<span className="_label">{option.label}</span>
</div>
))}
p>
Utilisez-vous react-bootstrap?