对话框-材质UI中按下按钮时，关注文本字段不工作

Question

我的目标是通过单击对话框中的按钮，在关闭对话框后将焦点设置在材质UI文本字段上。

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

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)}
/>

但是一旦我试图从对话框中的按钮调用焦点标题（），它就不会触发焦点。

对话框代码：

<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>

有人知道为什么我的. point（）在对话框中不起作用吗？如果我记录this.refs.my参考文献在这两种情况下，它显示完全相同的结果。

非常感谢。

Answer 1

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

要防止出现这种情况，请为动画创建回调或动画持续时间的超时，以在之后触发focus（）。这样地：

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

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