In layman’s terms, the use of ref is similar to the ID when we write labels, such as the simple page we want to implement

The box on the left is alert when a button is clicked, and the box on the right is alert when a button is out of focus. We normally get these two DOM elements via document and alert, but React already handles that for us, By using ref instead of document.getelementByid (), we know that instances that inherit react.componenthave the following attributes

The content of refs is that we mark a DOM element with ref, as shown in the following code

class Refest extends React.Component {
  showData = () = > {
    const {input1} = this.refs;
    alert(input1.value)
  }
  showData2 = () = > {
    const {input2} = this.refs;
    alert(input2.value)
  }
  render() {
    return (
      <div>
        <input ref="input1"  type="text" placeholder="Click show" /> &nbsp;
        <button onClick={this.showData}>Click here to show the one on the left</button>&nbsp;
        <input ref="input2" onBlur={this.showData2} type="text" placeholder="This one doesn't need to be clicked just out of focus."/>
      </div>
    );
  }
}
ReactDOM.render(<Refest />.document.getElementById('app'))
Copy the code

Notice that we use ref on each of the input tags, marking the tag with an ID, and then we get a tag with the tag name in our instance this.refs, which, by the way, marks the tag in the actual DOM. The above is a string ref, but it is not recommended to use it on the official website. The simple reason is that it is not efficient to write in this way. What is the second way to write? A form called a callback function. What is a callback function? It’s a function that satisfies three things: 1. 2. They are not called. 3. This function executes. So how do you use a ref with a callback?

class Refest extends React.Component {
  showData = () = > {
    const { input1 } = this;
    alert(input1.value)
  }
  showData2 = () = > {
    const { input2 } = this;
    alert(input2.value)
  }
  render() {
    return (
      <div>
        <input ref={currentNode= >This. input1 = currentNode} placeholder=" placeholder "; />&nbsp;
        <button onClick={this.showData}>Click here to show the one on the left</button>&nbsp;
        <input ref={currentNode= >This. input2 = currentNode} onBlur={this.showData2} type="text" placeholder=" placeholder "/></div>
    );
  }
}
ReactDOM.render(<Refest />.document.getElementById('app'))
Copy the code

You can see that we use a callback function to assign the current tag node to the object instance as a property, so we can deconstruct it in the method. (We have already tested that this function will be executed at execution time!!) Here’s a little details about this callback form ref, we are now the function is in the form of an inline directly within the tag, it will be a small problem is when the page node updates the callback will be executed twice, the first execution DiaoHan digital come back when parameter is null, The second execution will be the current node, which won’t cause too much of a problem. If you use a function defined in a class, you won’t have this problem. Of course, this problem has been ignored. The final way to use a ref is to use the official method, react.createref (), to create something like a container to store the ref, as shown in the following code.

class Refest extends React.Component {
  myRef1 = React.createRef();
  myRef2 = React.createRef();
  showData = () = > {
    alert(this.myRef1.current.value)
  }
  showData2 = () = > {
    alert(this.myRef2.current.value)
  }
  render() {
    return (
      <div>
       <input ref={this.myRef1} type="text" placeholder="Click show" />
       <button onClick={this.showData}>Click to show the content on the left</button>
       <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="Display when out of focus" />
      </div>
    );
  }
}
ReactDOM.render(<Refest />.document.getElementById('app'))
Copy the code

We used the official method to establish two ref containers, and then stored the two nodes into the corresponding REF container. It is noted here that a ref container can only store one node label, if there are more than one, the previous label will be overwritten, and finally we need to use current to value. The current is similar to the key, and what’s stored in it is the label. React also uses event delegates to add click methods to tags to improve efficiency. Officials also suggest that we use less ref, and in some cases these ref can be omitted, such as the above out-of-focus display can be omitted ref.

The ref in the input tag is then deleted, using the event source approach.