考察如下程式碼,頁面中有個輸入框,通過 Recoil Atom 來儲存輸入的值。 App.tsx function NameInput() {
const [name, setName] = useRecoilState(nameState);
return (
<>
<input
type="text"
value={name}
onChange={(event: React.FormEvent<HTMLInputElement>) => {
setName(event.currentTarget.value);
}}
/>
<p>{name}</p>
</>
);
}
function App() {
return (
<div className="App">
<NameInput />
</div>
);
}
實際執行效果是,輸入一定資訊後,將游標移動到其他位置再輸入,發現游標會被重置到已經輸入內容的最後。 Recoil 輸入框中游標位置被重置到了內容末尾 相關 issue 參見 Setter in selector forces the input cursor to jump to end of input field on change event #488 實踐中發現,該問題在 Recoil 搭配 React 16.8 才會有問題,而更新 React 後問題不復現,比如 16.9。 如果受限於平臺或其他不可抗力無法升級 React,臨時的解決辦法可以是通過 - const [name, setName] = useRecoilState(nameState);
+ const setRecoilName = useSetRecoilState(nameState);
+ const [name, setName] = useState("");
+ useEffect(() => {
+ setRecoilName(name);
+ }, [name, setRecoilName]);
|
The text was updated successfully, but these errors were encountered: |
Recoil Input 游標位置被重置到末尾的問題
相關文章
- input 獲取游標位置與設定游標位置
- input輸入框的游標定位的問題
- 控制input輸入框游標的位置
- 設定/獲得游標位置
- el-input 限制number型別,輸入中文,游標不垂直居中問題型別
- UITextField 游標位置,placeholder樣式UI
- JBuilder的游標不能正常工作的問題! (轉)UI
- ios11.3之前H5中input框游標位置怪異(不正確),已解決!iOSH5
- Jquery獲取敲擊回車時游標所在的位置jQuery
- 【譯】使用“強制執行到游標”
- Recoil 中多級資料聯動及資料重置的合理做法
- HTML input reset 重置按鈕HTML
- <th>標籤的<input type="reset"/>重置按鈕簡單介紹屬性
- 預設讓表單第一個input文字框獲取游標
- vue3中ctrl加回車換行,游標位置設定Vue
- 檢測檔案到末尾
- 開發小程式被問到最頻繁的問題(上)
- (12)mysql 中的游標MySql
- Python面試你可能會被問到的面試題Python面試題
- uniapp根據導航欄的標題定位到相應錨點位置APP
- 那些年踩過的坑——input輸入框 ios端 readyonly 點選出現游標iOS
- 多行文字末尾新增圖片排版問題解決
- 面試中可能會被問到的幾個關於“委託”的問題面試
- Windows重置網路卡錯誤問題Windows
- 游標操作快捷鍵
- Android studio快捷方式【 游標返回/前進被佔用】Android
- input file相容性問題
- input最大長度限制問題
- 414周賽·第三題 - 3282. 到達陣列末尾的最大得分陣列
- CCMenu及CCMenuItem位置問題UI
- winform之手繪矩形及游標字串與游標關聯顯示ORM字串
- Web前端求職時都會被問到的Redis面試題分享!Web前端求職Redis面試題
- 跳槽時,這些Java面試題99%會被問到Java面試題
- input函式出現的問題(Python)函式Python
- Web 中的“選區”和“游標”Web
- (012)mysql中的游標MySql
- 解決sqlplus中輸錯命令時的刪除、游標鍵不能使用問題SQL
- 微軟游標漏洞被駭客利用 緊急系統補丁終釋出微軟