zoukankan      html  css  js  c++  java
  • [React] Reference a node using createRef() in React 16.3

    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"));
  • 相关阅读:
    Makefile 文件详细规则
    unrar命令
    Vector容器 和 iteration 迭代器
    python的with语句
    anaconda 使用总结
    vim 保存退出命令集
    Tensorflow实例集
    jupyter notebook 使用例子
    tensorflow 安装教程(最佳)
    Ext.NET 4.1.0 搭建页面布局
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8720937.html
Copyright © 2011-2022 走看看