Quel est le moyen le plus efficace de mettre l'accent sur un champ de texte particulier après le rendu du composant ?
La documentation semble suggérer l'utilisation de réfs, par ex :
Définir ref="nameInput"
sur mon champ de saisie dans la fonction de rendu, puis appeler :
this.refs.nameInput.getInputDOMNode().focus();
Mais où dois-je appeler cette fonction ? J'ai essayé à plusieurs endroits, mais je n'arrive pas à le faire fonctionner.
La réponse de @Dhiraj'est correcte, et pour plus de commodité, vous pouvez utiliser l'accessoire autoFocus pour qu'une entrée fasse automatiquement le point lorsqu'elle est montée :
<input autoFocus name=...
Notez qu'en jsx, il s'agit de autoFocus
(F majuscule), contrairement au vieux html qui n'est pas sensible à la casse.
Vous devriez le faire dans componentDidMount
et [refs callback
][1] à la place. Quelque chose comme ceci
componentDidMount(){
this.nameInput.focus();
}
[1] : https://facebook.github.io/react/docs/refs-and-the-dom.html
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'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<div id="app"></div>