对话框打开时如何聚焦 React MUI TextField

Question

我在对话框中有 TextField，每次打开对话框时我都想聚焦它。我尝试使用inputRef回调，但 TextField 没有获得焦点。将 prop添加autoFocus到 TextField 也没有帮助。

最小的例子：

import { Button, Dialog, DialogContent, TextField } from "@mui/material";
import { useState } from "react";

function ExampleDialog(props: { isOpen: boolean; onClose: () => void }) {
  return (
    <Dialog open={props.isOpen} onClose={props.onClose}>
      <DialogContent>
        <TextField inputRef={(input) => input && input.focus()} fullWidth />
      </DialogContent>
    </Dialog>
  );
}

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Button
        variant="contained"
        color="success"
        onClick={() => {
          setIsOpen(true);
        }}
      >
        Open dialog
      </Button>

      <ExampleDialog isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </div>
  );
}

• react版本：18.2.0
• @mui/material版本：5.11.16

Answer 1

你检查过这个吗https://github.com/mui/material-ui/issues/33004

似乎 React 18 中的严格模式打破了这种行为

删除它或将disableRestoreFocusprop 添加到Dialog组件中