ref获取dom的真实节点

最新推荐文章于 2025-11-01 00:01:29 发布

转载最新推荐文章于 2025-11-01 00:01:29 发布 · 2.8k 阅读

文章标签：

#react #ref获取真实DOM元素

react 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在React中使用Refs来设置DOM元素的焦点。通过组件类或函数组件中的Refs，可以实现在需要时聚焦到特定输入框。此外，还讨论了如何让父组件控制子组件内的元素焦点。

要在React中设置焦点，我们可以将Refs用于DOM元素。

使用它，我们首先在组件类的JSX中创建一个元素的引用：

然后我们可以在需要时将它集中在组件的其他位置：

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  render() {
    return (
      <input
        type="text"
        ref={this.textInput}
      />
    );
  }
}

focus() {
  this.textInput.current.focus();
}

有时，父组件需要将焦点设置为子组件中的元素。我们可以通过子组件将DOM引用暴露给父组件来实现这一点，子组件将父组件的ref转发给子组件的DOM节点。

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.inputElement = React.createRef();
  }
  render() {
    return (
      <CustomTextInput inputRef={this.inputElement} />
    );
  }
}

// Now you can set focus when required.
this.inputElement.current.focus();

连接：https://reactjs.org/docs