React组件输入框输入字符后失焦问题求助

你遇到的输入框失焦问题，核心原因大概率是**EventModal组件在父组件中被重复创建**，或者父组件传递的props频繁变化导致组件不必要重渲染甚至重新挂载。以下是针对性的修复步骤：

1. 确保EventModal是独立组件，不要嵌套在父组件渲染函数内 #

如果你的父组件代码是类似下面这样（把EventModal定义在父组件函数里）：

function ParentComponent() {
  // 错误：每次父组件渲染都会重新定义EventModal，React会认为是全新组件，卸载旧的重新挂载
  const EventModal = ({ data, show, setShown }) => { /* ...你的组件代码... */ }

  return <EventModal data={data} show={show} setShown={setShown} />
}

修复方式：把EventModal移到父组件外部，作为独立的顶层组件，确保组件类型稳定：

// 独立定义，放在父组件外面
export default function EventModal({ data, show, setShown }: Props) {
  /* ...你的组件代码... */
}

function ParentComponent() {
  return <EventModal data={data} show={show} setShown={setShown} />
}

2. 同步data到event状态（处理编辑场景的动态数据） #

你的event状态初始值依赖data，但useState的初始值仅在组件首次渲染时生效。如果父组件的data发生变化（比如切换编辑的事件），event不会自动更新，可能导致状态不同步，甚至触发额外重渲染。用useEffect来同步：

import { useEffect } from 'react';

export default function EventModal({ data, show, setShown }: Props) {
  const [event, setEvent] = useState({
    eventId: data.id,
    location: data.location,
  });

  // 当data变化时，同步更新event状态
  useEffect(() => {
    setEvent({
      eventId: data.id,
      location: data.location,
    });
  }, [data]); // 依赖data，仅当data变化时执行

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

3. 优化props的引用稳定性 #

如果父组件传递的data每次都是新对象（比如每次渲染都创建{ id: 1, location: 'xxx' }），会导致EventModal频繁重渲染。在父组件用useMemo缓存data：

import { useMemo } from 'react';

function ParentComponent() {
  const data = useMemo(() => ({
    id: 1,
    location: 'London',
    name: 'Test Event'
  }), []); // 空依赖，仅初始化一次

  return <EventModal data={data} show={show} setShown={setShown} />
}

4. 简化状态更新逻辑（可选优化） #

你可以去掉单独的setEventId和setLocation函数，直接在onChange中更新状态，减少函数创建带来的微小性能影响：

<TextField
  type="number"
  label="TruckersMP event ID"
  variant="outlined"
  value={event.eventId}
  onChange={(e) => setEvent(prev => ({ ...prev, eventId: parseInt(e.target.value) }))}
  required
  InputProps={{
    readOnly: !!data.id
  }}
/>

<TextField
  label="Starting location"
  value={event.location}
  onChange={(e) => setEvent(prev => ({ ...prev, location: e.target.value }))}
  required
/>

优先排查第一步，这是输入框失焦最常见的原因——组件被重复创建导致重新挂载，输入框自然会失去焦点。

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