xxxxxxxxxx
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus</button>
</>
);
}
xxxxxxxxxx
/*
A common use case is to access a child imperatively:
*/
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
xxxxxxxxxx
import { useRef } from "react";
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
xxxxxxxxxx
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
xxxxxxxxxx
/**
* Accessing DOM elements
*
* Another useful application of the useRef() hook is to access DOM elements.
* This is performed in 3 steps:
*
* - Define the reference to access the element const elementRef = useRef();
* - Assign the reference to ref attribute of the element: <div ref={elementRef}></div>;
* - After mounting, elementRef.current points to the DOM element.
*/
import { useRef, useEffect } from 'react';
function AccessingElement() {
const elementRef = useRef();
useEffect(() => {
const divElement = elementRef.current;
console.log(divElement); // logs <div>I'm an element</div>
}, []);
return (
<div ref={elementRef}>
I'm an element
</div>
);
}
xxxxxxxxxx
import React, { useState, useRef, useEffect } from 'react'
import { render } from 'react-dom'
function App() {
const intervalRef = useRef()
const [count, setCount] = useState(0)
useEffect(() => {
intervalRef.current = setInterval(() => setCount(count => count + 1), 1000)
return () => {
clearInterval(intervalRef.current)
}
}, [])
return (
<>
<div style={{ fontSize: 120 }}>{count}</div>
<button
onClick={() => {
clearInterval(intervalRef.current)
}}
>
Stop
</button>
</>
)
}
render(<App />, document.querySelector('#app'))
xxxxxxxxxx
import { useRef } from "react";
function ExampleUseRef() {
const inputNode = useRef(null);
const onClick = () => {
inputNode.current.focus();
};
return (
<>
<input ref={inputNode} type="text" />
<button onClick={onClick}>Focus..</button>
</>
);
}
xxxxxxxxxx
import { useRef } from 'react';
function LogButtonClicks() {
const countRef = useRef(0);
const handle = () => {
countRef.current++; console.log(`Clicked ${countRef.current} times`);
};
console.log('I rendered!');
return <button onClick={handle}>Click me</button>;
}
xxxxxxxxxx
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
this.textInput.current.focus();
}
render() {
// tell React that we want to associate the <input> ref
// with the `textInput` that we created in the constructor
return (
<div>
<input
type="text"
ref={this.textInput} />
<input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}