React/Electron/Express应用输入框无法输入问题求助

应用基于Electron、React、Express和PostgreSQL搭建，员工页面左侧为员工列表，右侧可通过按钮打开创建表单；点击员工可在同表单中查看详情并执行更新/删除操作。当前流程正常，但删除/更新员工后点击添加员工时，输入框突然无法输入内容，最小化窗口或打开开发者工具后可恢复正常，尝试autofocus无效。

核心原因分析 #

这类输入框失去交互能力的问题，在Electron+React场景下，本质是React状态更新与Electron窗口焦点不同步，或是组件切换时的DOM状态残留导致的焦点异常。

具体修复方案 #

1. 修复EmployeeDetails中的提交参数错误（潜在状态污染） #

在EmployeeDetails的handleSubmit方法中，你调用了window.electron.updateEmployee(form)，但变量form未定义，实际应使用detailsForm。这个错误会导致更新失败后状态未正确重置，间接引发后续组件异常：

const handleSubmit = async (e) => {
  e.preventDefault()
  setMessage("")

  if (!detailsForm.name || !detailsForm.employeeId) {
    setMessage("❌ Employee Name and ID are required.")
    return
  }
  try {
    // 修正：将form替换为detailsForm
    const response = await window.electron.updateEmployee(detailsForm)

    if (response.code == 401) {
      console.log(response)
      setMessage(`❌ Failed to update. ${response.message}`)
      toast.error("Error updating employee")
    }

    if (response.code == 200) {
      toast.success("Employee updated successfully")
      setMessage("✅ Update successful")
      getEmployees()
    }
  } catch (err) {
    setMessage("❌ Failed to update.")
    console.error(err)
  }
}

2. 强制组件挂载时的焦点同步 #

在CreateEmployee组件中添加useRef和useEffect，确保组件挂载时强制聚焦输入框，同时重置表单状态：

const CreateEmployee = ({ getEmployees, action }) => {
  const [createForm, setCreateForm] = useState({
    employeeId: "",
    name: "",
    active: true,
  })
  const [message, setMessage] = useState("")
  const nameInputRef = useRef(null) // 创建输入框ref

  const handleChange = (e) => {
    const { name, value } = e.target
    if (name == "active") {
      setCreateForm((prev) => ({ ...prev, [name]: e.target.checked }))
    } else {
      setCreateForm((prev) => ({ ...prev, [name]: value }))
    }
  }

  // 组件挂载时聚焦输入框并重置状态
  useEffect(() => {
    if (nameInputRef.current) {
      nameInputRef.current.focus()
    }
    setCreateForm({
      employeeId: "",
      name: "",
      active: true,
    })
  }, [])

  // 其余handleSubmit代码不变...

  return (
    <EmployeeForm
      handleChange={handleChange}
      handleSubmit={handleSubmit}
      form={createForm}
      submitText="Submit"
      backAction={action}
      message={message}
      nameInputRef={nameInputRef} // 传递ref到子组件
    />
  )
}

修改EmployeeForm组件，将ref绑定到name输入框：

const EmployeeForm = ({
  handleChange,
  handleSubmit,
  handleDelete,
  form,
  submitText,
  backAction,
  message,
  nameInputRef, // 接收父组件传递的ref
}) => {
  return (
    <div className="relative max-w-md mx-auto">
      <div
        className="absolute top-2 right-2 cursor-pointer"
        onClick={backAction}
      >
        <X />
      </div>
      <form className="mt-8">
        <div className="relative z-0 w-full mb-5 group">
          <input
            ref={nameInputRef} // 绑定ref到输入框
            type="text"
            name="name"
            placeholder=""
            required
            onChange={handleChange}
            value={form.name}
          />
          <label htmlFor="name">
            Employee Name
          </label>
        </div>
        {/* 其余表单代码不变 */}
      </form>
    </div>
  )
}

3. 优化组件切换逻辑，避免状态冲突 #

在EmployeePage的handleCreateEmployee方法中，使用函数式更新确保状态顺序执行，避免组件挂载冲突：

const handleCreateEmployee = () => {
  // 先清除选中员工状态，再触发创建表单
  setSelectedEmployee(null, () => {
    setCreateEmployee(true)
  })
}

4. Electron窗口焦点兜底方案（若上述方法无效） #

如果仍存在焦点异常，可通过Electron主进程API强制窗口聚焦：

• 主进程main.js添加IPC处理：

ipcMain.handle('focus-window', () => {
  const mainWindow = BrowserWindow.getFocusedWindow()
  if (mainWindow) {
    mainWindow.focus()
  }
})

• 预加载脚本preload.js暴露API：

contextBridge.exposeInMainWorld('electron', {
  // 其他已有API...
  focusWindow: () => ipcRenderer.invoke('focus-window')
})

• 在CreateEmployee的useEffect中调用：

useEffect(() => {
  window.electron.focusWindow()
  if (nameInputRef.current) {
    nameInputRef.current.focus()
  }
}, [])

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