Recoil Input 游標位置被重置到末尾的問題
- 2021 年 4 月 16 日
- 筆記
|
考察如下程式碼，頁面中有個輸入框，通過 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: |
