React+Flowbite Modal中TextInput输入失焦问题解决方案求助

问题原因 #

输入框输入后立即失焦，本质是每次输入触发状态更新时，组件发生了不必要的重新渲染或挂载，导致输入框DOM元素被重建，丢失焦点。你的代码里有两个核心诱因：

• handleChangeInput函数在每次组件渲染时都会重新生成，导致TextInput的onChange prop频繁变化，触发组件重复渲染
• 状态更新未使用函数式写法，可能因闭包问题导致状态更新不及时，引发额外重渲染

解决方案 #

1. 用useCallback缓存输入处理函数 #

使用React的useCallback钩子固定handleChangeInput的引用，避免每次渲染都创建新函数实例，保证onChange prop的稳定性：

import { useCallback } from 'react';

// ...

const handleChangeInput = useCallback((e) => {
  const { name, value } = e.target;
  // 函数式更新获取最新状态，避免闭包问题
  setFormData(prev => ({ ...prev, [name]: value }));
}, []); // 空依赖项，React保证setFormData的引用稳定

2. 移除TextInput上的冗余key属性 #

你给每个TextInput设置了固定key（如key="name"），但输入框的id已作为唯一标识，冗余的key可能干扰React的DOM diff逻辑，直接删除即可：

// 修改前
<TextInput
  name="name"
  placeholder="John Cena"
  id="name" 
  key="name" // 删除这一行
  value={name}
  onChange={handleChangeInput}
  required={true}
/>

// 修改后
<TextInput
  name="name"
  placeholder="John Cena"
  id="name" 
  value={name}
  onChange={handleChangeInput}
  required={true}
/>

3. 修正初始状态的冗余空格 #

初始化formData时每个字段设为空格可能导致输入逻辑异常，改为空字符串更合理：

const [formData, setFormData] = useState({
  name: "",
  email: "",
  password: ""
});

完整核心代码片段 #

import { useState, useCallback } from 'react';
import { Modal, ModalHeader, ModalBody, TextInput, Label, Checkbox, Button } from 'flowbite-react';

// ...

const [formData, setFormData] = useState({
  name: "",
  email: "",
  password: ""
});

const { name, email, password } = formData;

const handleChangeInput = useCallback((e) => {
  const { name, value } = e.target;
  setFormData(prev => ({ ...prev, [name]: value }));
}, []);

// ...

return (
  <div>
    <Modal
      show={showModal}
      size="md"
      popup={true}
      onClose={toggleModal}
    >
      <ModalHeader />
      <ModalBody>
        <form className="space-y-6" action="#">
          <div className="space-y-6 px-6 pb-4 sm:pb-6 lg:px-8 xl:pb-8">
            {/* 其余代码保持不变 */}
            {!issignIn && (
              <div>
                <div className="mb-2 block">
                  <Label
                    htmlFor="name"
                    value="Your Name"
                  />
                </div>
                <TextInput
                  name="name"
                  placeholder="John Cena"
                  id="name"
                  value={name}
                  onChange={handleChangeInput}
                  required={true}
                />
              </div>
            )}
            {/* 其余输入框同理移除key属性 */}
          </div>
        </form>
      </ModalBody>
    </Modal>
  </div>
);

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