Reactjs 如何修复材质UI对话框文本字段焦点错误？

我正在我的工作中建立一个内部网站。在实现了基于权限的访问控制之后，我试图创建一个用户可以创建角色的地方。问题是这个。每当我点击文本字段时，光标就会消失。这意味着我一个字也打不出来

我可以通过单击文本字段并同时快速敲击键盘来输入值。我没有收到任何错误消息

我直接使用表单对话框。我将此组件导入父组件以使用它。它还没有链接到我的任何函数

我在对话框标记的内部和外部创建了额外的

，以查看我是否遇到了相同的问题。对话框标记内部的

也有同样的问题，但外部的可以正常工作

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <input type="text" />
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <input type="text" />
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
        <DialogContent>
          <DialogContentText>
            To subscribe to this website, please enter your email address here. We will send updates
            occasionally.
          </DialogContentText>
          <input type="text" />
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Email Address"
            type="email"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

从“React”导入React；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/DialogActions”导入DialogActions；
从“@material ui/core/DialogContent”导入DialogContent；
从“@material ui/core/DialogContentText”导入DialogContentText；
从“@material ui/core/DialogTitle”导入DialogTitle；
导出默认函数FormDialog（）{
const[open，setOpen]=React.useState（false）；
常量handleClickOpen=（）=>{
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
返回(
打开窗体对话框
订阅
若要订阅此网站，请在此处输入您的电子邮件地址。我们将发送更新
偶尔地
取消
订阅
);
}

有什么见解吗？

请提供一份能再现您的问题的报告。您提供的代码本身运行良好。我怀疑显示的代码之外的某些内容会导致整个对话框在键入时重新装入。将属性添加到对话框中对我起到了作用。请提供一个重现您的问题的方法。您提供的代码本身运行良好。我怀疑显示的代码之外的某些内容会导致整个对话框在键入时重新装入。将属性添加到对话框中对我起到了作用