This is the 18th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Translate: beta.reactjs.org/learn/manip…

Because React already processes the DOM structure based on render’s output, your components won’t need to manipulate the DOM very often. However, there may be times when you need to manipulate DOM elements managed by React, for example, to focus on a node, scroll to the node, or calculate its width and height. React has no built-in method to do this, so you’ll need ref to point to the DOM node.

In this series of articles you will learn:

  • How do I access DOM nodes managed by React using the REF attribute
  • How to integrate JSXrefAttribute associated withuseRefhook
  • How do I access the DOM nodes of other components
  • In which case it is safe to modify the DOM managed by React

For an introduction to and examples of refs, see my previous series of articles, useRef, which is easy to parse

series

  • How do I manipulate the DOM using ref? (1) Use ref to access DOM node
  • How do I manipulate the DOM using ref? (2) Use examples
  • How do I manipulate the DOM using ref? (c) How to use the ref callback to manage the list of ref
  • How do I manipulate the DOM using ref? The forwardRef accesses its component’s DOM node
  • How do I manipulate the DOM using ref? React State Updates DOM synchronously
  • How do I manipulate the DOM using ref? (6) Best practices

conclusion

  • Refs are a general concept, but most of the time you’ll use them to hold DOM elements.
  • You pass<div ref={myRef}>Instruct React to place the DOM nodemyRef.currentIn the.
  • Typically, you will use Refs for non-destructive operations such as focusing, scrolling, or measuring DOM elements.
  • By default, components do not expose their DOM nodes. You can do this by usingforwardRefAnd put the secondrefParameters are passed down to the specific node to select the DOM node to expose.
  • Avoid changing DOM nodes managed by React.
  • If you do modify the DOM nodes managed by React, modify the parts of React that have no reason to be updated.

practice

Focus search field

Thus, click the “Search” button to focus on the field.

export default function Page() {
  return (
    <>
      <nav>
        <button>Search</button>
      </nav>
      <input
        placeholder="Looking for something?"
      />
    </>
  );
}
Copy the code

The solution

Add a ref to the input and call focus() on the DOM node to focus it:

import { useRef } from 'react';

export default function Page() {
  const inputRef = useRef(null);
  return (
    <>
      <nav>
        <button onClick={()= > {
          inputRef.current.focus();
        }}>
          Search
        </button>
      </nav>
      <input
        ref={inputRef}
        placeholder="Looking for something?"
      />
    </>
  );
}
Copy the code

The above question adds a little difficulty ~

In real development, we usually don’t put components in a file, we split them, so how do we pass ref when we split them?

Make clicking the Search button put the focus in the field. Note that each component is defined in a separate file and should not be moved out. How do you connect them together?

// App.js
import SearchButton from './SearchButton.js';
import SearchInput from './SearchInput.js';

export default function Page() {
  return (
    <>
      <nav>
        <SearchButton />
      </nav>
      <SearchInput />
    </>
  );
}
Copy the code
// SearchButton.js
export default function SearchButton() {
  return (
    <button>
      Search
    </button>
  );
}
Copy the code
// SearchInput.js
export default function SearchInput() {
  return (
    <input
      placeholder="Looking for something?"
    />
  );
}
Copy the code

The solution

You need to add an onClick to the SearchButton and have the SearchButton pass it down to the browser 

// App.js
import { useRef } from 'react';
import SearchButton from './SearchButton.js';
import SearchInput from './SearchInput.js';

export default function Page() {
  const inputRef = useRef(null);
  return (
    <>
      <nav>
        <SearchButton onClick={()= >{ inputRef.current.focus(); }} / ></nav>
      <! -- -- -- >
      <SearchInput ref={inputRef} /> 
    </>
  );
}
Copy the code
// SearchButton.js
export default function SearchButton({ onClick }) {
  return (
    <button onClick={onClick}>
      Search
    </button>
  );
}
Copy the code
// SearchInput.js
import { forwardRef } from 'react';

export default forwardRef(
  // Wrap the component with the forwardRef and pass the ref
  function SearchInput(props, ref) {
    return (
      <input
        ref={ref}
        placeholder="Looking for something?"
      />); });Copy the code