In React. Js you don’t have to deal with DOM directly. React.js provides a series of on* methods to help us listen for events, so there is no need to call the DOM API of addEventListener directly in react. js. In react. js, you can directly render components in setState mode. During rendering, you can pass the new props to the sub-components to achieve the effect of page update.

The rerender mechanism of React. Js eliminates most DOM updates and removes third-party libraries such as jQuery that encapsulate DOM operations from our development tool chain.

However, react.js doesn’t have all the DOM manipulation requirements, and sometimes we still need to work with the DOM. For example, if you want to automatically focus to an input field after entering the page, you need to call the DOM API of input.focus(). For example, if you want to dynamically retrieve the size of a DOM element for subsequent animation, etc.

The ref attribute is provided in React. Js to help us retrieve the DOM node of a mounted element. You can attach the ref attribute to a JSX element.

You can see that we have added a ref attribute to the input element, whose value is a function. When the input element is mounted on the page, react. js calls this function and passes the mounted DOM node to the function. In the function we set the DOM element as an attribute of the component instance, so that we can get the DOM element later via this.input.

We can then use the DOM element in componentDidMount and call the DOM API of this.input.focus(). You’ll notice that we’ve used componentDidMount to focus on the input field once the page is loaded.

We can attach a ref to any tag that represents an HTML element to get its DOM element and then call the DOM API. But remember one rule: if you can do without ref, don’t use it. In particular, avoid using refs for automatic page updates and event listening, which react.js can do for you. Superfluous DOM manipulation is “noise” in the code, which is difficult to understand and maintain.

<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8" />
<title>React automatically focuses to an input box after entering the page</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class AutoFocusInput extends React.Component {
  componentDidMount () {
    this.input.focus()
  }

  render () {
    return (
      <input ref={(input)= > this.input = input} />
    )
  }
}
ReactDOM.render(
  <AutoFocusInput />.document.getElementById('root'));</script>
</body>
</html>
Copy the code

 

Another way of writing:

<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8" />
<title>React automatically focuses to an input box after entering the page</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}


ReactDOM.render(
  <MyComponent />.document.getElementById('root'));</script>
</body>
</html>
Copy the code