通过 ref 设置焦点仅适用于 React 的 setTimeout？

Question

我下面的代码可以工作，但如果this.buttonRef.current.firstChild.focus() 不在 setTimeout 函数中，它就会停止工作。

通过查看官方文档的裁判，我不明白为什么会发生这种情况。我的组件有什么明显的问题吗？如果不是我想知道我网站上的另一个组件是否正在“窃取”焦点，因为当 url 道具更改时模式已关闭。

更新：一件奇怪的事情是，如果我 console.log 在 setTimeout 之外，那么我可以看到该元素存在于 DOM 中。

UPDATE2：原来是我的模式中的 React Trap Focus 导致了问题。移除焦点陷阱意味着我不需要超时。因为我需要焦点陷阱，所以我认为 setTimeout 需要保留。

https://github.com/davidtheclark/focus-trap-react

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.buttonRef = React.createRef();
  }

  componentDidUpdate(prevProps) {
    if (this.props.url === '' && prevProps.url = "old-url") {
      console.log('target element: ', this.buttonRef.current.firstChild)

      // This doenst work if not in a setTimeout
      // this.buttonRef.current.firstChild.focus();
      setTimeout(() => {
        this.buttonRef.current.firstChild.focus();
      }, 1);
    }
  }

  render() {
    const {
      limitIsReached,
        add
    } = this.props;

    return (
      <Fragment>
        <Title>My title</Title>
        <Section>
          <Button>
            Add a promo code
          </Button>
          <span ref={this.buttonRef}>
            {limitIsReached ? (
              <Alert
                message="Sorry limit reached"
              />
            ) : (
              <Button
                onClick={add}
              >
                Add new
              </Button>
            )}
          </span>

          <List compact />
        </Section>
      </Fragment>
    );
  }
}

export default MyComponent;

Answer 1

考虑到看似 componentDidUpdate 在您的 buttonRef 解析之前运行，短的 setTimeout 并不是最糟糕的解决方案。

您可以尝试其他涉及设置状态的方法：

componentDidUpdate(prevProps) {
  if (.... oldurl) {
    this.setState({focusBtn: true})
  }

那么当buttonref解析时：

<span ref={ref=>{
  if (this.state.focusBtn) {
    this.buttonRef = ref;
    this.buttonRef.current.firstChild.focus();
  } } >...

编辑

好的，如果你在你的渲染方法中删除条件，React 将确保你的 ref 已经在 componentDidMount 和 componentDidUpdate 上解析（如你所愿）

试试这个：

<span ref={this.buttonRef}>

          <Alert
            message="Sorry limit reached"
            style={{display: limitIsReached ? 'block' : 'none'}}
          />

          <Button
            onClick={add} style={{display: limitIsReached ? 'none' : 'inline-block'}}
          >
            Add new
          </Button>
        )}
      </span>