Чтобы сфокусировать input при загрузке страницы в классовом компоненте, создай ref для input и вызови метод focus() в componentDidMount():
class App extends React.Component {
componentDidMount() {
this.nameInput.focus();
}
render() {
return (
<div>
<input defaultValue={'Won\'t focus'} />
<input
ref={(input) => this.nameInput = input}
defaultValue={'Will focus'}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Ref callback (input) => this.nameInput = input присваивает DOM-элемент input экземпляру компонента, так что ты можешь обращаться к нему напрямую.
Для функциональных компонентов (React 16.8+) используй хук useRef вместе с useEffect:
import React, { useEffect, useRef } from 'react';
const App = () => {
const inputElRef = useRef(null);
useEffect(() => {
inputElRef.current.focus();
}, []);
return (
<div>
<input defaultValue={'Won\'t focus'} />
<input ref={inputElRef} defaultValue={'Will focus'} />
</div>
);
};
ReactDOM.render(<App />, document.getElementById('app'));
Пустой массив зависимостей [] гарантирует, что эффект запустится только один раз при монтировании — это эквивалентно componentDidMount() в классовых компонентах.
useRef и хук useEffectВ компоненте класса callback ref (input) => this.nameInput = input напрямую присваивает DOM элемент экземпляру компонента, позволяя тебе вызвать this.nameInput.focus() в componentDidMount().
Новый — ещё не проверен сообществом
Вы