戰(zhàn)：value、defaultValue 與 onChange 完整指南)
前端UI組件【免費(fèi)下載鏈接】rsuite A suite of React components .項(xiàng)目地址https://gitcode.com/gh_mirrors/rs/rsuite點(diǎn)擊查看免費(fèi)下載DateRangeInput 是 rsuite 中允許用戶通過鍵盤逐段年/月/日/時(shí)/分/秒錄入日期范圍的文本輸入組件。本文以官方文檔 controlled.md 的受控 vs 非受控值示例為骨架結(jié)合 組件源碼、useControlled 鉤子實(shí)現(xiàn) 與 單元測試系統(tǒng)講解受控模式的完整用法、底層原理、全部 Props 以及配套的鍵盤交互與可訪問性細(xì)節(jié)幫助你準(zhǔn)確駕馭該組件的值管理機(jī)制。一、受控與非受控官方示例原貌在文檔目錄docs/pages/components/date-range-input/下官方演示片段controlled.md將受控模式與非受控模式并排展示是理解兩者差異的最佳入口。原示例完整代碼如下import { DateRangeInput, VStack, HStack, Text, Divider, Button } from rsuite; const App () { const [value, setValue] React.useState([new Date(2023-10-01), new Date(2023-10-31)]); const handleChange (value, event) { setValue(value); console.log(Controlled Change, value); }; return ( VStack spacing{10} divider{Divider /} HStack Text muted w{140} Controlled Value /Text DateRangeInput value{value} onChange{handleChange} w{260}/ Button onClick{() setValue(null)}Clear/Button /HStack HStack Text muted w{140} Uncontrolled Value /Text DateRangeInput defaultValue{value} w{260}/ /HStack /VStack ); }; ReactDOM.render(App /, document.getElementById(root));這個(gè)示例同時(shí)覆蓋了兩種使用姿勢(shì)值得逐點(diǎn)拆解受控模式Controlled ValueDateRangeInput value{value} onChange{handleChange} w{260} /。值的唯一數(shù)據(jù)源是外部useState組件內(nèi)部不維護(hù)任何值狀態(tài)每一次輸入都必須經(jīng)由onChange回調(diào)把新值同步回value形成外部持有 → 組件展示 → 事件回傳的閉環(huán)。Clear 按鈕Button onClick{() setValue(null)}Clear/Button直接通過setValue(null)清空外部狀態(tài)從而將輸入框清空。這正是受控模式的價(jià)值所在——外部代碼可以在任意時(shí)刻以任意方式改寫顯示值。非受控模式Uncontrolled ValueDateRangeInput defaultValue{value} w{260} /僅傳入初始值之后組件自行維護(hù)內(nèi)部狀態(tài)defaultValue只在首次渲染時(shí)生效后續(xù)外部變更不會(huì)影響組件。注意示例中非受控分支傳入的defaultValue{value}是受控分支 state 的初始值即[new Date(2023-10-01), new Date(2023-10-31)]說明defaultValue接受與value完全相同的[Date, Date] | null類型。二、底層原理useControlled 如何區(qū)分兩種模式rsuite 之所以能一套組件支持兩種模式核心在于內(nèi)部封裝了 useControlled 鉤子。在 DateRangeInput 組件實(shí)現(xiàn) 中這樣調(diào)用const [value, setValue, isControlled] useControlled(valueProp, defaultValue);useControlled的判定邏輯非常直接src/internals/hooks/useControlled.ts#L14-L37export function useControlledV any, D V(controlledValue: V, defaultValue: D) { const controlledRef useRef(false); controlledRef.current controlledValue ! undefined; const [uncontrolledValue, setUncontrolledValue] useState(defaultValue); // If it is controlled, this directly returns the attribute value. const value controlledRef.current ? controlledValue : uncontrolledValue; const setValue useCallback( nextValue { // Only update the value in state when it is not under control. if (!controlledRef.current) { setUncontrolledValue(nextValue); } }, [controlledRef] ); return [value, setValue, controlledRef.current] as [...]; }關(guān)鍵語義如下是否受控由valueprop 是否傳入決定只要外部傳入了value即value ! undefinedcontrolledRef.current即為true組件對(duì)外展示的值永遠(yuǎn)來自valueprop內(nèi)部uncontrolledValue完全失效。setValue在受控模式下是空操作受控時(shí)組件內(nèi)部對(duì)setValue的調(diào)用不會(huì)寫入任何狀態(tài)值的變化必須由外部通過onChange回調(diào)驅(qū)動(dòng)。因此若受控模式下忘記維護(hù)onChange回傳輸入會(huì)看起來沒反應(yīng)——這是所有受控組件的通用契約。返回值中的isControlled會(huì)被 DateRangeInput 繼續(xù)使用例如傳入dateInputOptions.isControlledDateDateRangeInput.tsx#L80使底層 DateInput 的狀態(tài)管理也遵循受控約束避免出現(xiàn)受控組件內(nèi)部狀態(tài)與外部 value 打架的邊界問題。從實(shí)現(xiàn)可見一個(gè)易被忽略的細(xì)節(jié)defaultValue的默認(rèn)值是[]DateRangeInput.tsx#L58即完全不給值時(shí)組件內(nèi)部以空數(shù)組為初始狀態(tài)輸入框展示為未填寫的格式占位符。三、值變更與清空handleChange 與 handleClear 的實(shí)現(xiàn)受控模式下每次按鍵最終都會(huì)進(jìn)入handleChangesrc/DateRangeInput/DateRangeInput.tsx#L117-L127const handleChange useEventCallback( (date: Date | null, event: React.SyntheticEventHTMLInputElement) { const nextValue dateType DateType.Start ? ([date, value?.[1]] as ValueType) : ([value?.[0], date] as ValueType); onChange?.(nextValue, event); setValue(nextValue); } );這段代碼揭示了兩個(gè)重要行為分段更新DateRangeInput 內(nèi)部用DateType.Start / DateType.End定義見 utils.ts#L4-L7區(qū)分當(dāng)前編輯的是起始日期還是結(jié)束日期。修改起始日期時(shí)保留結(jié)束日期反之亦然因此onChange拿到的永遠(yuǎn)是完整的[Date, Date] | null元組。雙通道同步onChange?.(nextValue, event)先把新值回傳給外部受控模式下這是唯一的值出口隨后setValue(nextValue)再走一遍useControlled——受控時(shí)這一調(diào)用被忽略非受控時(shí)寫入內(nèi)部狀態(tài)。清空邏輯由handleClear承載DateRangeInput.tsx#L129-L138const handleClear useEventCallback((event: React.SyntheticEventHTMLInputElement) { startDateState.setNewDate(null); endDateState.setNewDate(null); setSelectionRange(0, 0); reset(); setValue(null); onChange?.(null, event); });它會(huì)同時(shí)清空起止兩端、將光標(biāo)歸零并重置字段游標(biāo)狀態(tài)最終以null同時(shí)調(diào)用setValue與onChange。這解釋了為何在受控模式下按 Backspace當(dāng)輸入框全選時(shí)也能觸發(fā)onChange(null)——測試用例 對(duì)此有明確斷言全選后按 Backspace 會(huì)得到[null, null]或null的onChange參數(shù)且onChange只觸發(fā)一次。官方示例中的 Clear 按鈕沒有依賴handleClear而是直接setValue(null)改寫外部 state效果等價(jià)但完全由業(yè)務(wù)方掌控。四、組件 Props 全表與關(guān)鍵參數(shù)說明受控/非受控只是值管理的一個(gè)維度完整使用還需要掌握全部 Props。下表完整繼承自 DateRangeInput 官方文檔屬性類型(默認(rèn)值)說明characterstring( ~ )起始日期與結(jié)束日期之間的分隔字符defaultValue[Date, Date] | null默認(rèn)值非受控模式disabledboolean是否禁用組件formatstring(dd/MM/yyyy)日期在輸入框中的渲染格式onChange(date: [Date, Date] | null, event) void值改變后的回調(diào)函數(shù)plaintextboolean是否以純文本形式呈現(xiàn)readOnlyboolean是否為只讀sizelg | md | sm | xs(md)輸入框尺寸value[Date, Date] | null受控模式下的當(dāng)前值結(jié)合源碼補(bǔ)充幾個(gè)文檔未展開的細(xì)節(jié)format的默認(rèn)值實(shí)際隨 locale 變化雖然文檔表格標(biāo)注默認(rèn)值為dd/MM/yyyy但源碼中format: formatStr shortDateFormatDateRangeInput.tsx#L56而shortDateFormat來自getLocale(DateTimeFormats)L49-L50即跟隨CustomProvider注入的語言環(huán)境。因此中英文環(huán)境下默認(rèn)格式可能不同。format采用 Unicode 技術(shù)標(biāo)準(zhǔn)UTS #35的字段符號(hào)如yyyy、MM、dd、HH、mm、ss、aa等。character默認(rèn)值為 ~ 前后帶空格組件通過${formatStr}${character}${formatStr}拼接出完整的占位符/展示字符串DateRangeInput.tsx#L75例如yyyy-MM-dd ~ yyyy-MM-dd。官方 format 演示片段format.md展示了character – 配合MM/dd/yyyy的用法。placeholder未在 Props 表中單列但組件接口支持傳入不傳時(shí)自動(dòng)使用rangeFormatStr作為占位符L346。支持粘貼handlePasteL303-L323會(huì)按character切分剪貼板文本并解析兩端日期若均合法則直接回傳onChange并更新展示非法內(nèi)容如月份非法、格式不匹配則靜默忽略對(duì)應(yīng)測試見 Paste 分組。五、非受控與禁用只讀場景速覽非受控模式除defaultValue外還可以與disabled、readOnly、plaintext組合使用官方 disabled.md 展示了完整形態(tài)DateRangeInput w{260} disabled value{[new Date(2023-10-01), new Date(2023-10-31)]} / DateRangeInput w{260} readOnly value{[new Date(2023-10-01), new Date(2023-10-31)]} / DateRangeInput w{260} plaintext value{[new Date(2023-10-01), new Date(2023-10-31)]} /disabled會(huì)向底層input元素寫入disabled屬性禁用全部交互readOnly會(huì)寫入readonly屬性禁止編輯但保留聚焦與樣式plaintext將組件渲染為純文本形式適合詳情展示場景組件也支持放入InputGroup如拼接日歷圖標(biāo) Addon禁用狀態(tài)可透傳給組內(nèi)元素。根據(jù) 可訪問性章節(jié)DateRangeInput 本質(zhì)是input typetext元素因此天然繼承原生輸入框的無障礙語義。六、鍵盤交互與測試驗(yàn)證DateRangeInput 面向純鍵盤輸入設(shè)計(jì)官方文檔定義的鍵盤行為如下使用→←在日期段之間移動(dòng)光標(biāo)跨過character分隔符時(shí)會(huì)在 Start/End 兩個(gè)日期之間切換判斷邏輯見 utils.ts#L179-L212 的isSwitchDateType使用↓↑增減當(dāng)前選中字段的值跨月/跨年時(shí)自動(dòng)進(jìn)位回繞如 12 月按 ↑ 變?yōu)榇文?1 月使用Backspace刪除選中字段的值若全選則清空整個(gè)范圍使用數(shù)字鍵直接輸入以更新選中字段輸入滿位后光標(biāo)自動(dòng)跳到下一段在包含aaAM/PM的格式下直接鍵入a/p可切換上午/下午。這些行為全部有 單元測試 兜底驗(yàn)證例如L202-L212起始日期按 ↑ 年份 1、按 ↓ 年份 -1L266-L288方向鍵增減天數(shù)月末自動(dòng)回繞L566-L571連續(xù)鍵入2024010120240202得到2024-01-01 ~ 2024-02-02L331-L343F1~F12 功能鍵不觸發(fā)任何修改。同時(shí) L19-L55 通過testControlledUnControlled用例直接驗(yàn)證了本文主題——受控與非受控兩種模式下的值回傳與展示行為為傳入value即受控的結(jié)論提供了測試級(jí)證據(jù)。七、受控模式實(shí)戰(zhàn)建議基于源碼行為與官方示例總結(jié)受控模式下的關(guān)鍵實(shí)踐要點(diǎn)value與onChange必須成對(duì)出現(xiàn)受控模式下組件不自己保存值onChange里必須把回傳值寫入 state否則界面不響應(yīng)。官方示例中handleChange同步setValue(value)并console.log調(diào)試輸出即是標(biāo)準(zhǔn)范式。值為[Date, Date] | nullonChange的入?yún)⒖赡苁峭暾M也可能是null全選后 Backspace、或程序清空。處理時(shí)要對(duì)null做分支避免直接解構(gòu)數(shù)組報(bào)錯(cuò)。外部可隨時(shí)改寫值受控模式讓Clear 按鈕這類外部操作天然可行setValue(null)即可清空切換展示值、聯(lián)動(dòng)其他表單字段也同樣簡單。需要強(qiáng)調(diào)模式統(tǒng)一若一個(gè)受控值同時(shí)被value與defaultValue傳入組件以value為準(zhǔn)controlledRef由value ! undefined決定混用兩種模式容易產(chǎn)生困惑實(shí)踐中應(yīng)固定選擇其一。結(jié)合表單使用組件繼承FormControlBaseProps可作為Form.Control的受控組件接入表單校驗(yàn)體系onChange的簽名值 event與 rsuite 表單控件約定一致。掌握以上內(nèi)容后你不僅能在表單中熟練運(yùn)用受控的 DateRangeInput也能從源碼層面理解 rsuite 組件一組件兩模式的設(shè)計(jì)哲學(xué)——這同一套u(yù)seControlled機(jī)制也貫穿于 rsuite 其他輸入類組件如 InputPicker、DateInput 等學(xué)一即可通百。贊分享前端UI組件【免費(fèi)下載鏈接】rsuite A suite of React components .項(xiàng)目地址https://gitcode.com/gh_mirrors/rs/rsuite點(diǎn)擊查看免費(fèi)下載相關(guān)推薦深入掌握 Google Cloud IAM v1 Allow Policies使用 gcloud CLI 管理組織、文件夾、項(xiàng)目與資源級(jí)訪問控制深入掌握 Google Cloud IAM v1 Allow Policies使用 gcloud CLI 管理組織、文件夾、項(xiàng)目與資源級(jí)訪問控制 本篇技術(shù)指南前端UI組件Wazuh 如何從零搭建開發(fā)環(huán)境并按 TARGET 編譯 server 與 agentWazuh 如何從零搭建開發(fā)環(huán)境并按 TARGET 編譯 server 與 agent 在 Wazuh 倉庫中從源碼構(gòu)建 server即 manager和前端UI組件如何下載并準(zhǔn)備 olmOCR-mix-1025 訓(xùn)練數(shù)據(jù)集的各子集如何下載并準(zhǔn)備 olmOCR mix 1025 訓(xùn)練數(shù)據(jù)集的各子集 如果你要微調(diào) olmOCR例如復(fù)現(xiàn) olmOCR 2 7B 1025 FP8 https前端UI組件上一篇3步快速上手AKSharePython金融數(shù)據(jù)接口庫完全指南下一篇如何用AKShare金融數(shù)據(jù)接口庫快速獲取財(cái)經(jīng)數(shù)據(jù)Python量化分析入門指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 rsuite DateRangeInput 受控與非受控模式實(shí)戰(zhàn)：value、defaultValue 與 onChange 完整指南
前端UI組件【免費(fèi)下載鏈接】rsuite A suite of React components .項(xiàng)目地址https://gitcode.com/gh_mirrors/rs/rsuite點(diǎn)擊查看免費(fèi)下載DateRangeInput 是 rsuite 中允許用戶通過鍵盤逐段年/月/日/時(shí)/分/秒錄入日期范圍的文本輸入組件。本文以官方文檔 controlled.md 的受控 vs 非受控值示例為骨架結(jié)合 組件源碼、useControlled 鉤子實(shí)現(xiàn) 與 單元測試系統(tǒng)講解受控模式的完整用法、底層原理、全部 Props 以及配套的鍵盤交互與可訪問性細(xì)節(jié)幫助你準(zhǔn)確駕馭該組件的值管理機(jī)制。一、受控與非受控官方示例原貌在文檔目錄docs/pages/components/date-range-input/下官方演示片段controlled.md將受控模式與非受控模式并排展示是理解兩者差異的最佳入口。原示例完整代碼如下import { DateRangeInput, VStack, HStack, Text, Divider, Button } from rsuite; const App () { const [value, setValue] React.useState([new Date(2023-10-01), new Date(2023-10-31)]); const handleChange (value, event) { setValue(value); console.log(Controlled Change, value); }; return ( VStack spacing{10} divider{Divider /} HStack Text muted w{140} Controlled Value /Text DateRangeInput value{value} onChange{handleChange} w{260}/ Button onClick{() setValue(null)}Clear/Button /HStack HStack Text muted w{140} Uncontrolled Value /Text DateRangeInput defaultValue{value} w{260}/ /HStack /VStack ); }; ReactDOM.render(App /, document.getElementById(root));這個(gè)示例同時(shí)覆蓋了兩種使用姿勢(shì)值得逐點(diǎn)拆解受控模式Controlled ValueDateRangeInput value{value} onChange{handleChange} w{260} /。值的唯一數(shù)據(jù)源是外部useState組件內(nèi)部不維護(hù)任何值狀態(tài)每一次輸入都必須經(jīng)由onChange回調(diào)把新值同步回value形成外部持有 → 組件展示 → 事件回傳的閉環(huán)。Clear 按鈕Button onClick{() setValue(null)}Clear/Button直接通過setValue(null)清空外部狀態(tài)從而將輸入框清空。這正是受控模式的價(jià)值所在——外部代碼可以在任意時(shí)刻以任意方式改寫顯示值。非受控模式Uncontrolled ValueDateRangeInput defaultValue{value} w{260} /僅傳入初始值之后組件自行維護(hù)內(nèi)部狀態(tài)defaultValue只在首次渲染時(shí)生效后續(xù)外部變更不會(huì)影響組件。注意示例中非受控分支傳入的defaultValue{value}是受控分支 state 的初始值即[new Date(2023-10-01), new Date(2023-10-31)]說明defaultValue接受與value完全相同的[Date, Date] | null類型。二、底層原理useControlled 如何區(qū)分兩種模式rsuite 之所以能一套組件支持兩種模式核心在于內(nèi)部封裝了 useControlled 鉤子。在 DateRangeInput 組件實(shí)現(xiàn) 中這樣調(diào)用const [value, setValue, isControlled] useControlled(valueProp, defaultValue);useControlled的判定邏輯非常直接src/internals/hooks/useControlled.ts#L14-L37export function useControlledV any, D V(controlledValue: V, defaultValue: D) { const controlledRef useRef(false); controlledRef.current controlledValue ! undefined; const [uncontrolledValue, setUncontrolledValue] useState(defaultValue); // If it is controlled, this directly returns the attribute value. const value controlledRef.current ? controlledValue : uncontrolledValue; const setValue useCallback( nextValue { // Only update the value in state when it is not under control. if (!controlledRef.current) { setUncontrolledValue(nextValue); } }, [controlledRef] ); return [value, setValue, controlledRef.current] as [...]; }關(guān)鍵語義如下是否受控由valueprop 是否傳入決定只要外部傳入了value即value ! undefinedcontrolledRef.current即為true組件對(duì)外展示的值永遠(yuǎn)來自valueprop內(nèi)部uncontrolledValue完全失效。setValue在受控模式下是空操作受控時(shí)組件內(nèi)部對(duì)setValue的調(diào)用不會(huì)寫入任何狀態(tài)值的變化必須由外部通過onChange回調(diào)驅(qū)動(dòng)。因此若受控模式下忘記維護(hù)onChange回傳輸入會(huì)看起來沒反應(yīng)——這是所有受控組件的通用契約。返回值中的isControlled會(huì)被 DateRangeInput 繼續(xù)使用例如傳入dateInputOptions.isControlledDateDateRangeInput.tsx#L80使底層 DateInput 的狀態(tài)管理也遵循受控約束避免出現(xiàn)受控組件內(nèi)部狀態(tài)與外部 value 打架的邊界問題。從實(shí)現(xiàn)可見一個(gè)易被忽略的細(xì)節(jié)defaultValue的默認(rèn)值是[]DateRangeInput.tsx#L58即完全不給值時(shí)組件內(nèi)部以空數(shù)組為初始狀態(tài)輸入框展示為未填寫的格式占位符。三、值變更與清空handleChange 與 handleClear 的實(shí)現(xiàn)受控模式下每次按鍵最終都會(huì)進(jìn)入handleChangesrc/DateRangeInput/DateRangeInput.tsx#L117-L127const handleChange useEventCallback( (date: Date | null, event: React.SyntheticEventHTMLInputElement) { const nextValue dateType DateType.Start ? ([date, value?.[1]] as ValueType) : ([value?.[0], date] as ValueType); onChange?.(nextValue, event); setValue(nextValue); } );這段代碼揭示了兩個(gè)重要行為分段更新DateRangeInput 內(nèi)部用DateType.Start / DateType.End定義見 utils.ts#L4-L7區(qū)分當(dāng)前編輯的是起始日期還是結(jié)束日期。修改起始日期時(shí)保留結(jié)束日期反之亦然因此onChange拿到的永遠(yuǎn)是完整的[Date, Date] | null元組。雙通道同步onChange?.(nextValue, event)先把新值回傳給外部受控模式下這是唯一的值出口隨后setValue(nextValue)再走一遍useControlled——受控時(shí)這一調(diào)用被忽略非受控時(shí)寫入內(nèi)部狀態(tài)。清空邏輯由handleClear承載DateRangeInput.tsx#L129-L138const handleClear useEventCallback((event: React.SyntheticEventHTMLInputElement) { startDateState.setNewDate(null); endDateState.setNewDate(null); setSelectionRange(0, 0); reset(); setValue(null); onChange?.(null, event); });它會(huì)同時(shí)清空起止兩端、將光標(biāo)歸零并重置字段游標(biāo)狀態(tài)最終以null同時(shí)調(diào)用setValue與onChange。這解釋了為何在受控模式下按 Backspace當(dāng)輸入框全選時(shí)也能觸發(fā)onChange(null)——測試用例 對(duì)此有明確斷言全選后按 Backspace 會(huì)得到[null, null]或null的onChange參數(shù)且onChange只觸發(fā)一次。官方示例中的 Clear 按鈕沒有依賴handleClear而是直接setValue(null)改寫外部 state效果等價(jià)但完全由業(yè)務(wù)方掌控。四、組件 Props 全表與關(guān)鍵參數(shù)說明受控/非受控只是值管理的一個(gè)維度完整使用還需要掌握全部 Props。下表完整繼承自 DateRangeInput 官方文檔屬性類型(默認(rèn)值)說明characterstring( ~ )起始日期與結(jié)束日期之間的分隔字符defaultValue[Date, Date] | null默認(rèn)值非受控模式disabledboolean是否禁用組件formatstring(dd/MM/yyyy)日期在輸入框中的渲染格式onChange(date: [Date, Date] | null, event) void值改變后的回調(diào)函數(shù)plaintextboolean是否以純文本形式呈現(xiàn)readOnlyboolean是否為只讀sizelg | md | sm | xs(md)輸入框尺寸value[Date, Date] | null受控模式下的當(dāng)前值結(jié)合源碼補(bǔ)充幾個(gè)文檔未展開的細(xì)節(jié)format的默認(rèn)值實(shí)際隨 locale 變化雖然文檔表格標(biāo)注默認(rèn)值為dd/MM/yyyy但源碼中format: formatStr shortDateFormatDateRangeInput.tsx#L56而shortDateFormat來自getLocale(DateTimeFormats)L49-L50即跟隨CustomProvider注入的語言環(huán)境。因此中英文環(huán)境下默認(rèn)格式可能不同。format采用 Unicode 技術(shù)標(biāo)準(zhǔn)UTS #35的字段符號(hào)如yyyy、MM、dd、HH、mm、ss、aa等。character默認(rèn)值為 ~ 前后帶空格組件通過${formatStr}${character}${formatStr}拼接出完整的占位符/展示字符串DateRangeInput.tsx#L75例如yyyy-MM-dd ~ yyyy-MM-dd。官方 format 演示片段format.md展示了character – 配合MM/dd/yyyy的用法。placeholder未在 Props 表中單列但組件接口支持傳入不傳時(shí)自動(dòng)使用rangeFormatStr作為占位符L346。支持粘貼handlePasteL303-L323會(huì)按character切分剪貼板文本并解析兩端日期若均合法則直接回傳onChange并更新展示非法內(nèi)容如月份非法、格式不匹配則靜默忽略對(duì)應(yīng)測試見 Paste 分組。五、非受控與禁用只讀場景速覽非受控模式除defaultValue外還可以與disabled、readOnly、plaintext組合使用官方 disabled.md 展示了完整形態(tài)DateRangeInput w{260} disabled value{[new Date(2023-10-01), new Date(2023-10-31)]} / DateRangeInput w{260} readOnly value{[new Date(2023-10-01), new Date(2023-10-31)]} / DateRangeInput w{260} plaintext value{[new Date(2023-10-01), new Date(2023-10-31)]} /disabled會(huì)向底層input元素寫入disabled屬性禁用全部交互readOnly會(huì)寫入readonly屬性禁止編輯但保留聚焦與樣式plaintext將組件渲染為純文本形式適合詳情展示場景組件也支持放入InputGroup如拼接日歷圖標(biāo) Addon禁用狀態(tài)可透傳給組內(nèi)元素。根據(jù) 可訪問性章節(jié)DateRangeInput 本質(zhì)是input typetext元素因此天然繼承原生輸入框的無障礙語義。六、鍵盤交互與測試驗(yàn)證DateRangeInput 面向純鍵盤輸入設(shè)計(jì)官方文檔定義的鍵盤行為如下使用→←在日期段之間移動(dòng)光標(biāo)跨過character分隔符時(shí)會(huì)在 Start/End 兩個(gè)日期之間切換判斷邏輯見 utils.ts#L179-L212 的isSwitchDateType使用↓↑增減當(dāng)前選中字段的值跨月/跨年時(shí)自動(dòng)進(jìn)位回繞如 12 月按 ↑ 變?yōu)榇文?1 月使用Backspace刪除選中字段的值若全選則清空整個(gè)范圍使用數(shù)字鍵直接輸入以更新選中字段輸入滿位后光標(biāo)自動(dòng)跳到下一段在包含aaAM/PM的格式下直接鍵入a/p可切換上午/下午。這些行為全部有 單元測試 兜底驗(yàn)證例如L202-L212起始日期按 ↑ 年份 1、按 ↓ 年份 -1L266-L288方向鍵增減天數(shù)月末自動(dòng)回繞L566-L571連續(xù)鍵入2024010120240202得到2024-01-01 ~ 2024-02-02L331-L343F1~F12 功能鍵不觸發(fā)任何修改。同時(shí) L19-L55 通過testControlledUnControlled用例直接驗(yàn)證了本文主題——受控與非受控兩種模式下的值回傳與展示行為為傳入value即受控的結(jié)論提供了測試級(jí)證據(jù)。七、受控模式實(shí)戰(zhàn)建議基于源碼行為與官方示例總結(jié)受控模式下的關(guān)鍵實(shí)踐要點(diǎn)value與onChange必須成對(duì)出現(xiàn)受控模式下組件不自己保存值onChange里必須把回傳值寫入 state否則界面不響應(yīng)。官方示例中handleChange同步setValue(value)并console.log調(diào)試輸出即是標(biāo)準(zhǔn)范式。值為[Date, Date] | nullonChange的入?yún)⒖赡苁峭暾M也可能是null全選后 Backspace、或程序清空。處理時(shí)要對(duì)null做分支避免直接解構(gòu)數(shù)組報(bào)錯(cuò)。外部可隨時(shí)改寫值受控模式讓Clear 按鈕這類外部操作天然可行setValue(null)即可清空切換展示值、聯(lián)動(dòng)其他表單字段也同樣簡單。需要強(qiáng)調(diào)模式統(tǒng)一若一個(gè)受控值同時(shí)被value與defaultValue傳入組件以value為準(zhǔn)controlledRef由value ! undefined決定混用兩種模式容易產(chǎn)生困惑實(shí)踐中應(yīng)固定選擇其一。結(jié)合表單使用組件繼承FormControlBaseProps可作為Form.Control的受控組件接入表單校驗(yàn)體系onChange的簽名值 event與 rsuite 表單控件約定一致。掌握以上內(nèi)容后你不僅能在表單中熟練運(yùn)用受控的 DateRangeInput也能從源碼層面理解 rsuite 組件一組件兩模式的設(shè)計(jì)哲學(xué)——這同一套u(yù)seControlled機(jī)制也貫穿于 rsuite 其他輸入類組件如 InputPicker、DateInput 等學(xué)一即可通百。贊分享前端UI組件【免費(fèi)下載鏈接】rsuite A suite of React components .項(xiàng)目地址https://gitcode.com/gh_mirrors/rs/rsuite點(diǎn)擊查看免費(fèi)下載相關(guān)推薦深入掌握 Google Cloud IAM v1 Allow Policies使用 gcloud CLI 管理組織、文件夾、項(xiàng)目與資源級(jí)訪問控制深入掌握 Google Cloud IAM v1 Allow Policies使用 gcloud CLI 管理組織、文件夾、項(xiàng)目與資源級(jí)訪問控制 本篇技術(shù)指南前端UI組件Wazuh 如何從零搭建開發(fā)環(huán)境并按 TARGET 編譯 server 與 agentWazuh 如何從零搭建開發(fā)環(huán)境并按 TARGET 編譯 server 與 agent 在 Wazuh 倉庫中從源碼構(gòu)建 server即 manager和前端UI組件如何下載并準(zhǔn)備 olmOCR-mix-1025 訓(xùn)練數(shù)據(jù)集的各子集如何下載并準(zhǔn)備 olmOCR mix 1025 訓(xùn)練數(shù)據(jù)集的各子集 如果你要微調(diào) olmOCR例如復(fù)現(xiàn) olmOCR 2 7B 1025 FP8 https前端UI組件上一篇3步快速上手AKSharePython金融數(shù)據(jù)接口庫完全指南下一篇如何用AKShare金融數(shù)據(jù)接口庫快速獲取財(cái)經(jīng)數(shù)據(jù)Python量化分析入門指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考