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

【问题标题】：Focus on TextField not working when button pressed in Dialog - Material UI在对话框中按下按钮时，专注于 TextField 不起作用 - 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 它会显示完全相同的结果。

谢谢！

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

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

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

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

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

【讨论】：