在对话框中按下按钮时，专注于 TextField 不起作用 - Material UI

Posted 2023-02-22

【中文标题】在对话框中按下按钮时，专注于 TextField 不起作用 - Material UI

【英文标题】：Focus on TextField not working when button pressed in Dialog - Material UI

【发布时间】：2019-04-23 08:18:34

【问题描述】：

我的目标是通过单击此对话框中的按钮关闭对话框后将焦点设置在 Material UI TextField 上。

当我从不在对话框组件中的按钮调用以下代码时，它会起作用：

focusTitle = () => 
  this.setState( isOpen: false );
  this.myRef.current.focus();
;

按钮代码：

<Button onClick=this.focusTitle />

我要关注的文本字段代码：

<TextField
  inputRef=this.myRef
  label="Title"
  id="title"
  multiline
  rowsMax="4"
  value=this.state.title
  autoFocus=true
  className=classes.title
  helperText="Enter a catchy title"
  onChange=e => this.onTitleChange(e.target.value)
/>

但是，一旦我尝试从对话框中的按钮调用 focusTitle()，它就不会触发焦点。

对话框代码：

<Dialog
  open=this.state.isOpen
  onClose=this.focusTitle
  aria-labelledby="alert-dialog-title"
  aria-describedby="alert-dialog-description"
  >

  <DialogTitle id="alert-dialog-title">"Warning"</DialogTitle>

  <DialogContent>
    <DialogContentText id="alert-dialog-description">
      Warning Message!
    </DialogContentText>
  </DialogContent>

  <DialogActions>
    <Button onClick=this.focusTitle color="primary">
      OK
    </Button>
  </DialogActions>
</Dialog>

任何人都知道为什么我的 .focus() 在对话框的情况下不起作用？如果我在这两种情况下都记录 this.refs.myRef 它会显示完全相同的结果。

谢谢！

【参考方案1】：

您的对话框可能有一个结束动画。只要动画在运行，focus()函数就不会被正确调用。

为防止这种情况发生，请为动画创建回调或为动画持续时间创建一个超时，以在之后触发focus()。像这样：

focusTitle = () => 
  this.setState( isOpen: false );

  setTimeout(
    function() 
      this.myRef.current.focus();
     
    .bind(this),
    500 // Change to duration of the animation
;