React按钮事件重新定位焦点到输入框

import React, { Component } from "react";

class RefocusDemo extends Component {
  render() {
    return (
      <div>
        <input
          ref={(input) => {
            this.input = input;
          }}
//           ref属性的值是一个箭头函数，参数接收真实的DOM
// 通过ref将this.input设置为input标签，那么在方法中就可以直接操纵它
          autoFocus
        />
        {/* autoFocus属性的作用：页面渲染完成后，该输入框自动获取焦点。 */}
        <button onClick={this.refocus.bind(this)}>Button</button>
      </div>
    ); // end return
  } // end render

  refocus() {
    let focusEl = this.input; // this.input能找到input标签，因为ref属性里的回调函数将input标签复制给了组件的input属性，所以可以直接使用。
    // let focusEl = this.refs.inputII;
    focusEl.focus(); // 点击按钮时，光标焦点定位到focusEL所获得的标签元素上
  } // end refocus()
} // end class
export default RefocusDemo;

关于ref属性的说明，参考文章《React ref属性》