React中在移动端Antd的Input组件进入页面自动聚焦功能
在React中使用Ant Design的Input组件时，如果你想让输入框在进入页面时自动聚焦，你可以通过使用useEffect钩子在组件挂载后设置聚焦。
以下是一个简单的例子：
import React, { useEffect } from 'react';
import { Input } from 'antd';
const AutoFocusInput = () => {
useEffect(() => {
// 使用refs获取输入框DOM元素，并调用focus方法
const inputRef = React.createRef();
inputRef.current.focus();
}, []); // 确保useEffect只在组件挂载时执行一次
return (
<Input ref={inputRef} placeholder="自动聚焦的输入框" />
);
};
export default AutoFocusInput;在这个例子中，我们使用React.createRef()创建了一个ref，并将其传递给Input组件的ref属性。useEffect钩子用于设置聚焦，它的依赖数组为空数组，意味着它只会在组件挂载时执行一次。
评论已关闭