当前位置：首页 > React

react如何让input自动聚焦

2026-01-25 12:36:25React

使用 autoFocus 属性

在 React 中，最简单的方法是使用 autoFocus 属性。当组件挂载时，input 元素会自动获得焦点。

<input type="text" autoFocus />

需要注意的是，autoFocus 在 React 中是一个布尔属性，只需添加即可生效。这种方法适用于简单的场景，但可能在某些情况下（如动态渲染）表现不一致。

使用 useRef 和 useEffect 手动控制

对于更复杂的场景，可以使用 useRef 钩子结合 useEffect 手动控制焦点。这种方法更灵活，适用于动态渲染或条件聚焦的情况。

import React, { useRef, useEffect } from 'react';

function AutoFocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return <input type="text" ref={inputRef} />;
}

useEffect 的空依赖数组 [] 确保焦点操作仅在组件挂载时执行一次。如果需要根据条件动态聚焦，可以将条件添加到依赖数组中。

在类组件中使用 ref

如果使用类组件，可以通过 createRef 或回调 ref 的方式实现自动聚焦。

import React, { Component } from 'react';

class AutoFocusInput extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }
}

动态条件聚焦

如果需要根据某些条件（如状态变化）触发聚焦，可以将条件逻辑添加到 useEffect 中。

import React, { useRef, useEffect, useState } from 'react';

function ConditionalFocusInput() {
  const inputRef = useRef(null);
  const [shouldFocus, setShouldFocus] = useState(false);

  useEffect(() => {
    if (shouldFocus && inputRef.current) {
      inputRef.current.focus();
    }
  }, [shouldFocus]);

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={() => setShouldFocus(true)}>Focus Input</button>
    </div>
  );
}

这种方法适用于需要通过交互或状态变化触发聚焦的场景。

react如何让input自动聚焦