[Antd] Modal Dialog 里的 Input,光标会跳到最后

By | 5月 23, 2025

这个跟 Antd <Input /> 没有关系,换成 <input /> 光标也会跳都最后。

Solution 1: Input 非受控

使用 defaultValue 属性,这样 Input 就不会因为 model 的改变而刷新。

对于 pop up dialog,非受控可以接受,相当于给页面的初始值。

Solution 2: 使用中间 state (掩耳盗铃)

引入中间 state,使用 useEffect 来更新 model。本质也是非受控,因为 model 的改变,不会再次更新中间的 state。

export const useModelState = <T, >(
  value: T, 
  setValue?: Dispatch<SetStateAction<T>>,
): [T, Dispatch<SetStateAction<T>>] => {
  const [state, setState] = useState<T>(value);

  useEffect(() => {
    setValue?.(state);
  }, [state]);

  return [state, setState];
}