Set concentrarsi su un campo di reagire-bootstrap.Input utilizzando refs.x.getDOMNode.focus

Question

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

Note:

1. Il campo di immissione è una classe react-bootstrap.Input.
2. Il getDOMNode(). Concentrarsi() concetto è da Facebook react docs

Quando il pulsante gestore onclick viene eseguito, il campo di inserimento e-mail dovrebbe essere sempre la messa a fuoco, ma non sta accadendo. Ho trovato che la classe field di input reacst-bootstrap sta rendendo il vero campo di input DOM all'interno di un div wrapping. Questa è l'uscita del 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> 

Così si presenta come l'ingresso non è sempre la messa a fuoco perché il focus è applicato sulla confezione div, che lo respinge (io uso document.activeElement nella console per controllare).

La domanda è: come concentrarsi sull'elemento reale input?

Nota: Un po 'estraneo ma React rispetta la proprietà autoFocus. È utile nel caso in cui sia necessario impostare lo stato attivo subito dopo il rendering. Tuttavia, non è un sostituto per il modo programmatico.

Answer 1

Provare getInputDOMNode() anziché getDOMNode().

Answer 2

a rendere

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

nel gestore di eventi

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

Answer 3

Dal findDOMNode non è più il metodo suggerito e può essere deprecata da Facebook, è necessario utilizzare la proprietà autoFocus (che viene fornito dal Reagire framework, non reagire-bootstrap). Questo è un polyfill cross-browser per l'attributo HTML autofocus.

<FormControl 
    autoFocus 
    ... 
/> 

Fonti:

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