demand:
When doing mobile projects, introduce the Input input box. When using the Input input box, I hope to automatically get the focus, so that the input method on the mobile terminal will automatically pop up, which is convenient for users to use.
achieve:
<Input
ref={
function (input) {
if (input != null) {
input.focus();
}
}}
/>
why
In React.js, you basically don't need to deal with the DOM directly. React.js provides a series of on* methods to help us monitor events, so there is no need to directly call the DOM API of addEventListener in React.js; in the past, we used manual DOM operations to update the page (for example, with the help of jQuery), but in React.js. In js, the component can be re-rendered directly through setState, and the new props can be passed to the child component during rendering, so as to achieve the effect of page update.
React.js's re-rendering mechanism helps us avoid most of the DOM update operations, and also allows third-party libraries like jQuery that mainly encapsulate DOM operations to be removed from our development tool chain.
But React.js can't fully meet all DOM manipulation requirements. Sometimes we still need to deal with DOM. For example, if you want to automatically focus on an input box after entering the page, you need to call the DOM API of input.focus(). For example, you want to dynamically obtain the size of a DOM element for subsequent animation, and so on.
React.js provides the ref attribute to help us get the DOM node of the mounted element. You can add the ref attribute to a JSX element:
class AutoFocusInput extends Component {
componentDidMount () {
this.input.focus()
}
render () {
return (
<input ref={
(input) => this.input = input} />
)
}
}
ReactDOM.render(
<AutoFocusInput />,
document.getElementById('root')
)
You can see that we added a ref attribute to the input element, and the attribute value is a function. When the input element is mounted on the page, React.js will call this function and pass the mounted DOM node to this function. In the function, we set this DOM element as an attribute of the component instance, so that we can get this DOM element through this.input in the future.
Then we can use this DOM element in componentDidMount and call the DOM API of this.input.focus(). As a whole, the function of automatically focusing on the input box when the page loads is completed (you can notice that we use the component life cycle of componentDidMount).
We can add ref to any representative HTML element tag to get its DOM element and then call DOM API. But remember one principle: if you can use ref, you don't use it. In particular, avoid using ref to do the automatic page update operations and event monitoring that React.js can already help you do. Excessive DOM operations are actually "noise" in the code, which is not conducive to our understanding and maintenance.
By the way, you can actually add ref to the component tag, for example:
<Clock ref={
(clock) => this.clock = clock} />
In this way, what you get is an instance of this Clock component initialized inside React.js. But this is not a common practice, and it is not recommended to do so, so it is briefly mentioned here, and interested friends can learn and explore by themselves.
