Tengo varios componentes ReactSelect y una pieza de estado global que es responsable de mantener todos mis valores seleccionados en una matriz.
Seleccione
<Select styles={inputStyles} className="basic-single" classNamePrefix="select" isClearable={true} isSearchable={false} placeholder={'Select Your Most Convenient Time Slot'} options={newHoursArr} isMulti={false} onChange={(values) => handleChange(values)} defaultValue={clientServiceReferral.selectedTimeSlots.map((referral) => ( referral.timeSlot === timeWithDate ? ( { ['label']: referral.value, ['value']: referral.value } ) : null ))} />función handleChange
const handleChange = (value) => { const found = clientServiceReferral.selectedTimeSlots.find(element => element.timeSlot === timeWithDate); if (found) { clientServiceReferral.selectedTimeSlots.splice(found, 1) } const newValue = { timeSlot: timeWithDate, value: value.value } setClientServiceReferral({ ...clientServiceReferral, selectedTimeSlots: [...clientServiceReferral.selectedTimeSlots, newValue] }) } ReactSelect tiene un accesorio isClearable . Lo que permite a los usuarios borrar la entrada con un clic de botón. Esto devuelve un valor null cuando los values se registran en la función onChange , pero ¿hay alguna forma de devolver el valor real dentro de la selección que se borra cuando se hace clic en el botón Borrar?
Hay un segundo parámetro opcional pasado al evento onChange . Es de este tipo:
export interface ActionMetaBase<Option> { option?: Option | undefined; removedValue?: Option; removedValues?: Options<Option>; name?: string; } Ahora, nunca he usado esta biblioteca, pero parece que removedValue o removedValues podrían ser útiles. no sé.
De todos modos, lo obtuve de sus documentos . Espero que funcione para usted:
Para cualquier persona interesada, la respuesta de Via Joshua Wood, el valor de cualquier artículo borrado se puede encontrar de la siguiente manera:
onChange={(values, removedValue) => handleChange(values, removedValue)} const handleChange = (value, removedValue) => { if (removedValue.action === 'clear') { console.log('removed', removedValue.removedValues[0]) } // removedValues returns an array