zoukankan      html  css  js  c++  java
  • react ref获取dom对象

    react文档

    step = React.createRef();  // init
    
    <div ref={this.step}></div> // bind
    
      componentDidMount() {
        l(this.step.current.offsetHeight); // 获取数据
      }
    

    为 类 添加ref

    这种方法是获取组件的实例,而不是组件的dom

    class Hello extends Component {
      log = () => {
        l(1);
      };
      render() {
        return (
          <div>
            <button>click me</button>
          </div>
        );
      }
    }
    
    class Test extends Component {
      btn = React.createRef();
    
      componentDidMount() {
        this.btn.current.log(); // 1
      }
      render() {
        return (
          <div>
            <Hello ref={this.btn} />
          </div>
        );
      }
    }
    

    函数组件使用 ref

    function CustomTextInput(props) {
      // 这里必须声明 textInput,这样 ref 回调才可以引用它
      let textInput = null;
    
      function handleClick() {
        textInput.focus();
      }
    
      return (
        <div>
          <input
            type="text"
            ref={(input) => { textInput = input; }} />
    
          <input
            type="button"
            value="Focus the text input"
            onClick={handleClick}
          />
        </div>
      );  
    }
    

    传递 refs

    class Hello extends Component {
      render() {
        return (
          <div>
            <button ref={this.props.btnRef}>click me</button>
          </div>
        );
      }
    }
    
    class Test extends Component {
      btn = React.createRef();
    
      componentDidMount() {
        fromEvent(this.btn.current, "click").subscribe(v => l(v.type)); // click
      }
      render() {
        return (
          <div>
            <Hello btnRef={this.btn} />
          </div>
        );
      }
    }
    

    高阶组件中传递 ref

    function withTest() {
      return function(Target) {
        class WithTest extends Component {
          render() {
            const { forwardedRef, ...rest } = this.props;
            return (
              <div>
                233
                <Target ref={forwardedRef} {...rest} />
              </div>
            );
          }
        }
    
        function forwardRef(props, ref) {
          return <WithTest {...props} forwardedRef={ref} />;
        }
    
        return React.forwardRef(forwardRef);
      };
    }
    
    @withTest()
    class Hello extends Component {
      render() {
        return (
          <div>
            <div>hello</div>
          </div>
        );
      }
    }
    
    class Test extends Component {
      btn = React.createRef();
    
      componentDidMount() {
        l(this.btn.current); // 获取到 Hello 的实例
      }
    
      render() {
        return <Hello ref={this.btn} />;
      }
    }
    
  • 相关阅读:
    Laravel5如何向闭合函数内传递参数 where function 传参
    laraveladmin省市区三级联动
    laravel中间件失效,配置文件重新加载
    Laravel-admin 加载视图后,blade 模板 JS 失效
    laravel-admin Field type [editor] does not exist.
    laravel-admin 表单提交报错
    laravel-admin利用ModelTree实现对分类信息的管理
    laravel-admin后台框架基本使用
    C#模版学习研究
    github下载下来的C#控制台小游戏[含源码]
  • 原文地址:https://www.cnblogs.com/ajanuw/p/9904177.html
Copyright © 2011-2022 走看看