[React] Reference a node using createRef() in React 16.3

最新推荐文章于 2024-04-13 23:10:22 发布

weixin_33877885

最新推荐文章于 2024-04-13 23:10:22 发布

阅读量101

点赞数

文章标签： javascript ViewUI

本文介绍了React中Refs的不同使用方式，从废弃的字符串Refs到回调Refs，再到React 16.3中引入的新方法createRef()。通过示例代码展示了如何创建Refs对象，并通过.current属性来访问DOM节点。

摘要由CSDN通过智能技术生成

In this lesson, we look at where we came from with refs in React. Starting with the deprecated string ref pattern, callback refs, and then how to use the new createRef() method in React 16.3.

Additional Resources: refs and the dom

You can use 'React.createRef()' to create a ref object. Then to access it from <obj>.current.<ref_name>

import React from "react";
import { render } from "react-dom";

class App extends React.Component {
  fullName = React.createRef();

  handleBlur = () => {
    this.fullName.current.blur();
  };

  handleFocus = () => {
    this.fullName.current.focus();
  };

  render() {
    return (
      <div className="section">
        <div className="field">
          <label className="label">Full Name</label>
          <div className="control">
            <input className="input" ref={this.fullName} type="text" />
          </div>
        </div>
        <button
          className="button is-link is-outlined"
          onClick={this.handleFocus}
        >
          Focus
        </button>{" "}
        <button
          className="button is-danger is-outlined"
          onClick={this.handleBlur}
        >
          Blur
        </button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));