Définissez le focus sur un champ react-bootstrap.Input à l'aide de refs.x.getDOMNode.focus
Le JSX:
var Button = require("react-bootstrap").Button;
var Input = require("react-bootstrap").Input;
var MyClass = React.createClass({
onclick: function () {
this.refs.email.getDOMNode().focus();
console.log('DOM element', this.refs.email.getDOMNode());
}
render: function () {
return (
<div>
<Button onClick={this.onlick}>Login</Button>
<Input ref='email' type='email' />
</div>
);
},
});
Notes:
- Le champ de saisie est un
react-bootstrap.Input
classe. - La getDOMNode().focus() concept est de Facebook réagir docs
Lorsque le bouton onclick gestionnaire s'exécute, l'e-mail champ de saisie doit être faire la mise au point, mais il ne se passe rien. J'ai trouvé que la réaction de bootstrap champ de Saisie de la classe est rendu le réel DOM champ de saisie à l'intérieur d'un emballage div. C'est la sortie de la console.journal:
<div class="form-group" data-reactid=".1awy8d4e9kw.1.3.$=1$3:0.0.0.1.0">
<input class="form-control" type="email" data-reactid=".1awy8d4e9kw.1.3.$=1$3:0.0.0.1.0.1:$input">
</div>
Ressemble tellement à l'entrée n'est pas faire la mise au point parce que l'accent est appliquée sur l'emballage div, qui la rejette (j'utilise document.activeElement
dans la console pour vérifier).
Question est, comment se concentrer sur le réel input
élément?
Note:
Un peu sans relation, mais Réagir respecte la autoFocus
de la propriété. C'est utile dans le cas où l'accent est nécessaire pour être fixé immédiatement après le rendu. Encore, ce n'est pas un substitut pour les programmes.
source d'informationauteur tivoni
Vous devez vous connecter pour publier un commentaire.
Essayer
getInputDOMNode()
au lieu degetDOMNode()
.en rendre
dans le gestionnaire d'événement
Depuis
findDOMNode
n'est plus la méthode proposée et peut être obsolète par Facebook, vous devez utiliser leautoFocus
de propriété (qui est fourni par le Réagir cadre, de ne pas réagir-bootstrap). C'est un cross-browser polyfill pour le HTMLautofocus
attribut.Sources: