ref获取dom的真实节点

最新推荐文章于 2024-07-26 19:17:00 发布

sliiva

最新推荐文章于 2024-07-26 19:17:00 发布

阅读量2.8k

点赞数

分类专栏： react 文章标签： react ref获取真实DOM元素

react 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

要在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