React.createRef()

class CustomTextInput extends React.Component {
    constructor(props) {
        super(props);
        this.textInput = React.createRef();
        this.focusTextInput = this.focusTextInput.bind(this);
    }

    focusTextInput() {
        this.textInput.current.focus();
    }

    render() {
        return (
            <div>
                <input
                    type="text"
                    ref={this.textInput} />
                <input
                    type="button"
                    value="Focus the text input"
                    onClick={this.focusTextInput}
                />
            </div>); }}Copy the code

1. Create an anchor object

Using react.createref () creates an Object with an empty property and __proto__ refers to the Object prototype function

2. Bind the anchor point object to the label

<input type="text" ref={this.textInput} />
Copy the code

After rendering, make this.textinput. Current =input, which points to the DOM tag at the anchor point

3. Use anchor points

<input
    type="button"
    value="Focus the text input"
    onClick={this.focusTextInput}
/>
Copy the code

Click to trigger focusTextInput(), which executes the function internally to focus the anchor point

Refs are anchors that mark a location so you can use the DOM of that location directly later

The callback Refs

class CustomTextInput extends React.Component {
    constructor(props) {
        super(props);
        this.textInput = null;
        this.focusTextInput = () = > {
            / / the focus
            if (this.textInput){
                this.textInput.focus(); }}; }render() {
        // e is the input tag
        return (
            <div>
                <input
                    type="text"
                    ref={(e)= >{this.textInput=e}}
                />
                <input
                    type="button"
                    value="Focus the text input"
                    onClick={this.focusTextInput}
                />
            </div>); }}Copy the code

1. Create and bind an object at the anchor point

<input type="text" ref={(e)= >{this.textInput=e}}/>
Copy the code

Using the arrow function, the argument e is the DOM tag here, so this.textinput =input, to distinguish it from the previous method, which assigns.current

2. Use anchor points

constructor(props) {
    super(props);
    this.textInput = null;
    this.focusTextInput = () = > {
        if (this.textInput){
            this.textInput.focus(); }}; }Copy the code

Here we write the arrow function directly in the constructor and point to it with this.focusTextInput

There is no need to bind. In short, functions in constructors are bound directly to object properties, whereas functions written separately are bound to their prototype chain

Refs forward

The react.forwardref () method forwards the ref instance down to the underlying DOM component as the second argument to its callback function
const TextInput = React.forwardRef((props, ref) = > (
    / / the inputRef. Current = (
    <input type="text" placeholder="Please enter table name" ref={ref} />
));
// Create an anchor point
const inputRef = React.createRef();
class CustomTextInput extends React.Component {
    handleSave = () = > {
        console.log(inputRef.current);
    };

    render() {
        return (
            <div>{/* Specify ref instance to component TextInput, inputref.current =TextInput */}<TextInput ref={inputRef} />
                <button onClick={this.handleSave}>save</button>
            </div>); }}Copy the code

Here is an example of Refs forwarding, as follows:

1. Create a ref instance (inputRef) with react.createref ();

2. Assign the ref instance to the ref attribute of the component (TextInput);

The react.forwardref () method forwards the ref instance down to the underlying DOM component as the second argument to its callback function

4. The DOM node value can be accessed through the current object in the outer component.

Printing of the console. The log (inputRef. Current); :

The forwarding succeeds, and the global inputRef instance (anchor) points to the DOM element

The TextInput component is now replaced without forwarding

class TextInput extends React.Component{
    render(){
        return <input type="text" placeholder="Please enter table name"/>}}Copy the code

The global inputRef instance (anchor point) points to the TextInput DOM element