Material-UI对话框（/模态框）中TextField每次onChange时失去焦点问题

在使用Material-UI的Dialog/Modal组件时，遇到以下问题：点击其中的TextField输入内容，每次触发onChange事件时，该TextField都会失去焦点。

<List key={"test1"} style={{ marginBottom: '10px' }}>
  <TextField
    required
    id="filled-basic"
    key={categoryData.title}
    label="Title"
    name="title"
    value={categoryData.title}
    type="name"
    variant="filled"
    style={{ width: "130ch" }}
    onChange={(e)=>{
      setCategoryData({...categoryData,
        title:e.target.value})
        console.log(e.target.value);
    }}
  />
</List>

问题根源在于TextField的key属性绑定了categoryData.title：

• 每次输入触发onChange时，categoryData.title会随输入内容更新，导致key值动态变化
• React识别到key变更后，会销毁旧的TextField组件并重建新实例，直接导致输入框失去焦点

解决步骤：

• 给TextField设置固定不变的key，比如用字符串"title-input"这类不会随输入内容改变的标识
• 若父组件List的key稳定且TextField是唯一子元素，也可以直接移除这个不必要的key

修改后的代码示例：

<List key={"test1"} style={{ marginBottom: '10px' }}>
  <TextField
    required
    id="filled-basic"
    key="title-input"
    label="Title"
    name="title"
    value={categoryData.title}
    type="name"
    variant="filled"
    style={{ width: "130ch" }}
    onChange={(e)=>{
      setCategoryData({...categoryData,
        title:e.target.value})
        console.log(e.target.value);
    }}
  />
</List>

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