input focus in react code example
Example 1: react focus
const FocusDemo = () => {
const [inputRef, setInputFocus] = useFocus()
return (
<>
<button onClick={setInputFocus} >
FOCUS
</button>
<input ref={inputRef} />
</>
)
}
const useFocus = () => {
const htmlElRef = useRef(null)
const setFocus = () => {htmlElRef.current && htmlElRef.current.focus()}
return [ htmlElRef, setFocus ]
}
Example 2: react focus textarea
const focusDiv = useRef();
useEffect(() => {
if(focusDiv.current) focusDiv.current.focus();
}, [focusDiv]);
return (
<div ref={focusDiv}></div>
);
Example 3: react focus
<input type="text" autoFocus />