(outValue);
+ const inputRef = React.useRef(null);
// 之所以要增加个内部的 value 是为了防止用户输入过快时造成卡顿的问题
useEffect(() => {
setValue(outValue);
}, [outValue]);
+ // TODO: antd 的 Input 的 autoFocus 有 BUG,会不生效,等待官方修复后再简化:https://github.com/ant-design/ant-design/issues/41239
+ useEffect(() => {
+ // 1. 组件在第一次渲染时自动 focus,提高用户体验
+ inputRef.current.input.focus();
+
+ // 2. 当组件已经渲染,并再次显示时,自动 focus
+ const observer = new IntersectionObserver((entries) => {
+ if (entries[0].isIntersecting) {
+ inputRef.current.input.focus();
+ }
+ });
+
+ observer.observe(inputRef.current.input);
+ return () => {
+ observer.disconnect();
+ };
+ }, []);
+
return (
{
const { insert } = props;
const options = useContext(SchemaOptionsContext);
- console.log('🚀 ~ file: MapBlockInitializer.tsx:12 ~ MapBlockInitializer ~ options:', options);
const { getCollectionFieldsOptions } = useCollectionManager();
const { t } = useMapTranslation();