React Refs 简单演示

React 支持一种非常特殊的属性 Ref ,可以用来绑定到 render() 输出的任何组件上

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';

class Focus extends Component{
  constructor(props){
    super(props);
    this.focusFn=this.focusFn.bind(this);
  }

  focusFn(){
    .refs.myInput.focus();
  }

  render(){
    return(
      <div>
        <input type="text" ref="myInput" />
        <br/>
        <button onClick={this.focusFn}>点我</button>
      </div>
    )
  }
}

  ReactDOM.render(
    <div>
       <Focus />
    </div>,document.getElementById('example')
  );

serviceWorker.unregister();

 

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...