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:

  1. Le champ de saisie est un react-bootstrap.Input classe.
  2. 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