如何在 React 应用程序中不可用的函数中访问 DOM 元素

How do I access a DOM element in a function where this.refs is unavailable in a React app?

本文关键字：函数 访问 元素 DOM React 应用程序      更新时间：2023-09-26

我正在制作一个 React 应用程序并使用 http://marcio.github.io/react-skylight/来实现模态。

export default class SomeComponent extends Component {
  ...
  render() {
    return (
      ...
        <SkyLight ref="improveTaskModal">
          <form>
            <input type="text" ref="myInput" />
      ...
    );
  }
}

我想在模态打开后立即专注于输入元素。所以，我试着做

_executeAfterModalOpen(){
     this.refs.myInput.focus();
}

但是，这里this指的是

Object { 
  hideOnOverlayClicked: true, 
  afterOpen: wrapMethod/<(),
  dialogStyles: Object,
  title: "Improve task", 
  children: Object,
  showOverlay: true,
  overlayStyles: Object,
  closeButtonStyle: Object
}
看起来

您并没有将组件的此引用绑定到_executeAfterModalOpen 。

放

this._executeAfterModalOpen = this._executeAfterModalOpen.bind(this)

在组件构造函数中。

@syousif解决方案是正确的。 您需要将函数与类的上下文绑定。除此之外，如果你想在模态加载后立即集中注意力，那么你必须在 componentDidMount 中执行此操作，所以你可以这样做而不是函数： 

componentDidMount(){this.refs.myInput.focus();}

并且您不需要绑定此函数，因为它是组件类函数。

相关文章：