React双输入组件焦点联动实现求助：模态框与主输入交互需求

核心思路 #

基于双状态分离主输入框与Modal输入框的内容，通过焦点控制和事件监听实现无缝输入体验：

• 维护mainInputValue（主输入框）、modalInputValue（Modal输入框）、isModalOpen（Modal显示状态）三个核心状态
• 利用useRef获取输入框DOM引用，精准控制焦点转移
• 通过输入、键盘事件监听实现自动弹框、退格关闭的逻辑

完整实现代码 #

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

const InputModalDemo = () => {
  const [mainInputValue, setMainInputValue] = useState('');
  const [modalInputValue, setModalInputValue] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  const mainInputRef = useRef(null);
  const modalInputRef = useRef(null);

  // 主输入框输入事件：触发Modal并转移焦点
  const handleMainInputChange = (e) => {
    const inputValue = e.target.value;
    setMainInputValue(inputValue);
    
    if (inputValue && !isModalOpen) {
      setIsModalOpen(true);
      setModalInputValue(inputValue);
    }
  };

  // Modal输入框内容更新
  const handleModalInputChange = (e) => {
    setModalInputValue(e.target.value);
  };

  // Modal输入框键盘事件：退格清空时关闭Modal
  const handleModalKeyDown = (e) => {
    if (e.key === 'Backspace' && modalInputValue === '') {
      setIsModalOpen(false);
      setMainInputValue('');
      // 焦点转回主输入框
      mainInputRef.current?.focus();
    }
  };

  // Modal打开后自动聚焦到内部输入框
  useEffect(() => {
    if (isModalOpen) {
      // 延迟确保Modal DOM已渲染
      setTimeout(() => {
        modalInputRef.current?.focus();
      }, 0);
    }
  }, [isModalOpen]);

  return (
    <div style={{ padding: '20px' }}>
      {/* 主输入框 */}
      <input
        ref={mainInputRef}
        type="text"
        value={mainInputValue}
        onChange={handleMainInputChange}
        placeholder="开始输入触发Modal"
        style={{ padding: '8px', fontSize: '16px' }}
      />

      {/* Modal组件 */}
      {isModalOpen && (
        <div style={{
          position: 'fixed',
          top: '0',
          left: '0',
          width: '100%',
          height: '100%',
          backgroundColor: 'rgba(0,0,0,0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}>
          <div style={{
            backgroundColor: 'white',
            padding: '20px',
            borderRadius: '8px'
          }}>
            <input
              ref={modalInputRef}
              type="text"
              value={modalInputValue}
              onChange={handleModalInputChange}
              onKeyDown={handleModalKeyDown}
              style={{ padding: '8px', fontSize: '16px', width: '300px' }}
            />
          </div>
        </div>
      )}
    </div>
  );
};

export default InputModalDemo;

关键逻辑说明 #

1. 自动弹框与焦点转移：主输入框输入非空内容时，立即打开Modal并同步输入内容到Modal输入框，通过useEffect监听isModalOpen状态变化，在Modal渲染完成后自动聚焦到内部输入框，实现输入不中断。
2. 退格关闭逻辑：监听Modal输入框的退格键事件，当内容为空时触发关闭操作，同时清空主输入框内容并将焦点转回主输入框，形成完整的交互闭环。
3. 双状态隔离：主输入框仅在初始输入和Modal关闭后更新内容，Modal输入框独立维护输入状态，避免了主输入框实时更新带来的视觉违和感。

内容的提问来源于stack exchange，提问作者Honey Singh