React SignupModal组件输入框每输入一个字符就失焦问题求助

从你提供的代码可以直接定位核心问题，按优先级排查修改即可：

• Dialog组件属性错误：你用的Material UI Dialog的open属性需要传布尔值控制显隐，你现在传的是handleClickOpen函数，这会导致每次状态更新时Dialog被强制重挂载，内部输入框自然会随组件重挂载丢失焦点。修正写法如下：

<Dialog
  open={open}
  onClose={handleClose}
>

• 删掉冗余的显隐控制逻辑：你额外给Dialog加了 sx={{ visibility: props.visibleOn }}样式控制显隐，和Dialog原生的open属性逻辑冲突，两套并行的显隐规则会导致组件异常重绘。统一只用open属性控制弹窗显隐即可，不需要额外加visibility样式。
• 其他可选排查点：
  • 确认输入框的key属性是固定值：如果每次渲染给输入框生成随机key，React会每次都把输入框当作新节点重挂载，直接丢失焦点
  • 确认输入框没有定义在SignupModal组件内部：如果是嵌套在SignupModal里的函数组件，每次SignupModal重渲时组件引用会变化，导致重挂载失焦，这种情况把输入框组件移到SignupModal外部定义即可
  • 检查每个输入框的value和onChange是否正确绑定了对应状态：比如邮箱输入框value设为email，onChange绑定handleChangeEmail，避免绑定错误导致异常重渲

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