Quiero hacer un filtro múltiple para que el usuario pueda eliminar cualquiera de los elementos hasta que la longitud de los elementos sea uno. Quiero agregar isFixed = true en el objeto dinámicamente cuando el usuario elimine 2 de 3 elementos para este ejemplo a continuación.
import React, { useState } from 'react'; import Select from 'react-select'; const options = [ { value: 'apple', label: 'Apple' }, { value: 'orange', label: 'Orange' }, { value: 'grape', label: 'Grape' }, ]; const orderOptions = (values) => values && values.filter((v) => v.isFixed).concat(values.filter((v) => !v.isFixed)); export default function TestSelect() { const [value, setValue] = useState(orderOptions([...options])); console.log('value', value); const onChange = (value, { action, removedValue }) => { switch (action) { case 'remove-value': case 'pop-value': if (removedValue.isFixed) { return; } break; case 'clear': value = options.filter((v) => v.isFixed); break; default: break; } value = orderOptions(value); setValue(value); }; return ( <div> <Select value={value} isMulti isClearable={value && value.some((v) => !v.isFixed)} name="fruit" classNamePrefix="select" onChange={onChange} options={options} defaultValue={options} /> </div> ); }Solo tiene que verificar si solo queda un elemento en la matriz de valores dentro del caso del interruptor. Para hacerlo, simplemente agregue dos líneas:
... const onChange = (value, { action, removedValue }) => { switch (action) { case "remove-value": case "pop-value": if (removedValue.isFixed) return; if (value.length === 1) value[0].isFixed = true; // <-- add the isFixed element break; case "clear": value = options.filter((v) => v.isFixed); break; default: value.forEach(x => x.isFixed = false) // <-- remove the isFixed element break; } value = orderOptions(value); setValue(value); }; ... Recuerda agregar la parte de styles para que sea más visual. Como puedes ver aquí .