如何在打开模态框时选中PrimeReact InputText组件的初始值

你可以通过结合useRef访问InputText的原生DOM节点，再配合模态框的显示事件或状态监听，实现打开模态框时自动选中输入框内容的效果，具体实现如下：

核心实现步骤 #

• 给InputText绑定useRef，用于获取组件实例及底层原生input元素
• 在模态框显示的时机（如Dialog的onShow事件，或监听visible状态变化），调用原生input的focus()和select()方法

代码示例 #

方式1：利用Dialog的onShow事件 #

import { useState, useRef } from 'react';
import { Dialog } from 'primereact/dialog';
import { InputText } from 'primereact/inputtext';

const ModalWithSelectedInput = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const inputRef = useRef(null);

  const handleModalShow = () => {
    // 确保DOM已渲染完成，获取原生input元素
    requestAnimationFrame(() => {
      if (inputRef.current?.inputEl) {
        const nativeInput = inputRef.current.inputEl;
        nativeInput.focus();
        nativeInput.select();
      }
    });
  };

  return (
    <>
      <button onClick={() => setModalVisible(true)}>打开模态框</button>
      <Dialog 
        visible={modalVisible} 
        onHide={() => setModalVisible(false)}
        onShow={handleModalShow}
      >
        <InputText ref={inputRef} value="需要选中的初始值" />
      </Dialog>
    </>
  );
};

export default ModalWithSelectedInput;

方式2：利用useEffect监听模态框可见状态 #

import { useState, useRef, useEffect } from 'react';
import { Dialog } from 'primereact/dialog';
import { InputText } from 'primereact/inputtext';

const ModalWithSelectedInput = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const inputRef = useRef(null);

  useEffect(() => {
    if (modalVisible && inputRef.current?.inputEl) {
      const nativeInput = inputRef.current.inputEl;
      // 延迟执行确保模态框及输入框已完成渲染
      requestAnimationFrame(() => {
        nativeInput.focus();
        nativeInput.select();
      });
    }
  }, [modalVisible]);

  return (
    <>
      <button onClick={() => setModalVisible(true)}>打开模态框</button>
      <Dialog 
        visible={modalVisible} 
        onHide={() => setModalVisible(false)}
      >
        <InputText ref={inputRef} value="需要选中的初始值" />
      </Dialog>
    </>
  );
};

export default ModalWithSelectedInput;

关键说明 #

• PrimeReact的InputText组件实例通过inputEl属性暴露底层原生input DOM节点，必须通过这个属性才能调用原生的focus()和select()方法
• 使用requestAnimationFrame而非setTimeout，能更精准地确保DOM绘制完成后再执行操作，避免因模态框渲染延迟导致的DOM节点获取失败

内容的提问来源于stack exchange，提问作者Omid Khosrowshahli