我有幾個ReactSelect組件和一個全域狀態,它負責將我選擇的所有值保存在一個陣列中。
選擇
<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
))}
/>
處理改變函式
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有一個isClearable道具。它允許用戶通過單擊按鈕來清除輸入。這將回傳null何時values記錄在onChange函式中的值,但是有沒有辦法回傳在單擊清除按鈕時被清除的選擇中的實際值?
uj5u.com熱心網友回復:
有一個可選的第二個引數傳遞給onChange事件。它屬于這種型別:
export interface ActionMetaBase<Option> {
option?: Option | undefined;
removedValue?: Option;
removedValues?: Options<Option>;
name?: string;
}
現在,我從未使用過這個庫,但它看起來removedValue或removedValues可能有幫助?身份證。
無論如何,我是從他們的檔案中得到的。希望它對你有幫助:
uj5u.com熱心網友回復:
對于任何有興趣的人,通過 Joshua Wood 的回答,可以找到任何已清除專案的價值:
onChange={(values, removedValue) => handleChange(values, removedValue)}
const handleChange = (value, removedValue) => {
if (removedValue.action === 'clear') {
console.log('removed', removedValue.removedValues[0])
}
// removedValues returns an array
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/453023.html
標籤:javascript 反应 反应选择
上一篇:運行批處理檔案以執行PowerShell和其他批處理檔案
下一篇:保持角度在1到180度之間
