import React, { Component, Fragment } from "react";

class Ref extends Component {

  constructor(props) {

    super(props);

    this.handleInputChange = this.handleInputChange.bind(this);

    this.handleBtnClick = this.handleBtnClick.bind(this);

    this.state = {

      inputValue: "",

    };

  }

  handleInputChange(e) {

    //  console.log(e.target.value);

    this.setState({

      inputValue: e.target.value,

    });

  }

  handleBtnClick() {

    console.log(this.state.inputValue);

    this.setState({

      inputValue: "",

    });

  }

  render() {

    return (

      <Fragment>

        {/* ref写在html标签上，获取的是dom节点  */}

        <input

          ref={(input) => {

            this.inputElem = input;

          }}

          value={this.state.inputValue}

          onChange={this.handleInputChange}

        />

        <button onClick={this.handleBtnClick}>提交</button>

      </Fragment>

    );

  }

}

export default Ref;