Set Fokus auf einem reagieren-bootstrap.Input Feld mit refs.x.getDOMNode.focus

Question

Die 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> 
      ); 
     }, 
    }); 

Hinweise:

1. Das Eingabefeld ist eine react-bootstrap.Input Klasse.
2. Die GetDOMNode(). Focus() Konzept ist von Facebook react docs

Wenn die Schaltfläche Onclick-Handler läuft, sollte das E-Mail-Eingabefeld den Fokus bekommen, aber es ist nicht passiert. Ich habe festgestellt, dass die Eingabefeldklasse react-bootstrap das echte DOM-Eingabefeld in einem Wrapping-Div darstellt. Dies ist der Ausgang des console.log:

<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> 

sieht so wie der Eingang nicht den Fokus erhalten, da der Fokus auf der Verpackung div angewandt wird, die es ablehnt (ich benutze document.activeElement in der Konsole zu überprüfen).

Frage ist, wie man auf das reale input Element sich konzentriert?

Hinweis: Ein bisschen unabhängig, aber React respektiert die autoFocus Eigenschaft. Dies ist nützlich, wenn der Fokus unmittelbar nach dem Rendern eingestellt werden soll. Dennoch ist es kein Ersatz für den programmatischen Weg.

Answer 1

Versuchen Sie getInputDOMNode() anstelle von getDOMNode().

Answer 2

in

<FormControl 
    type='text' 
    ref={(c)=>this.formControlRef=c} 
    /> 

in Ereignishandler

someHandler() { 
    ReactDOM.findDOMNode(this.formControlRef).focus(); 
} 

Answer 3

Da findDOMNode ist nicht mehr die vorgeschlagene Methode machen und kann durch Facebook veraltet, sollten Sie die autoFocus Eigenschaft verwenden (die durch die zur Verfügung gestellt wird Reagiere Framework, nicht Reactive-Bootstrap). Dies ist ein browserübergreifendes Polyfill für das HTML-Attribut autofocus.

<FormControl 
    autoFocus 
    ... 
/> 

Quellen:

1. Focusing to the FormControl
2. Support needed for focusing inputs in modals?