Question

我的目标是在通过单击对话框中的一个按钮关闭对话框后，将重点放在Material UI TextField上。

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

IndexToString

按钮代码：

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

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

<Button onClick={this.focusTitle} />

但是，当我尝试从对话框中的按钮调用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)}
/>

任何人都有一个想法，为什么在对话框中我的.focus（）无法正常工作？如果我在这两种情况下都记录this.refs.myRef，则会显示完全相同的结果。

谢谢！

Answer 1

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

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

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

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

当在对话框-材质UI中按下按钮时，将焦点放在TextField上不起作用

1 个答案: