在 ReactJS 中渲染后如何在输入字段上设置焦点？

在ReactJS中，可以使用ref属性来访问组件的DOM元素，并在渲染完成后设置焦点。下面是一个简单的示例：

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

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

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

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

在上面的示例中，我们使用了useRef hook来创建一个引用对象inputRef，并将其赋值给输入框的ref属性。在useEffect hook中，我们使用ref.current.focus()来设置输入框的焦点。我们还将[]传递给useEffect hook，以确保它只在组件渲染后运行一次。

在实际应用中，可能需要在条件满足时才设置焦点。例如，当用户单击按钮时才设置焦点。在这种情况下，可以将引用对象存储在组件的状态中，并在需要时更新它。下面是一个示例：

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

function MyInputWithButton() {
  const [isFocused, setIsFocused] = useState(false);
  const inputRef = useRef(null);

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

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={() => setIsFocused(true)}>Set focus</button>
    </div>
  );
}

在上面的示例中，我们使用useState hook来存储是否应该设置焦点的状态。我们将isFocused作为依赖项传递给useEffect hook，并在状态更改时更新它。当用户单击按钮时，我们将isFocused设置为true，从而触发useEffect hook并设置输入框的焦点。

需要注意的是，在ReactJS中使用ref属性存在一些陷阱。如果不小心滥用它，会导致代码难以维护和调试。因此，建议只在必要时使用ref属性，并将其与其他ReactJS特性结合使用，如状态和生命周期方法。