react Refs使用

//Refs使用，绑定dom元素，ref 不能设置在无状态组件上
//不要在 render 或者 render 之前访问 refs
import React, { Component } from 'react';

class Refsdemo extends Component {
    constructor(props) {
        super(props);
        this.state={ userInput: '' };
    }
  //双向绑定
    handleChange(e) {
      this.setState({ userInput: e.target.value });
      console.log( this.state.userInput)
    }
  //点击文字的时候，如果value是空，那么聚焦
    clearAndFocusInput() {
      this.setState({ userInput: '' }, () => {
        this.refs.theInput.focus();
      });
    }
  
    render() {
      return (
        <div>
          <div onClick={this.clearAndFocusInput.bind(this)}>
            点击按钮聚焦
          </div>
          <input
            ref="theInput"
            value={this.state.userInput}
            onChange={this.handleChange.bind(this)}
          />
        </div>
      );
    }
  }

  export default Refsdemo