web-dev-qa-db-ja.com

refs.x.getDOMNode.focusを使用してreact-bootstrap.Inputフィールドにフォーカスを設定します

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

ノート：

  1. 入力フィールドはreact-bootstrap.Inputクラスです。
  2. GetDOMNode（）。focus（）の概念は Facebook react docs からのものです

ボタンonclickハンドラーが実行されると、電子メール入力フィールドがフォーカスを取得しているはずですが、それは発生していません。 react-bootstrap入力フィールドクラスが、ラッピングdiv内の実際のDOM入力フィールドをレンダリングしていることがわかりました。これは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>

したがって、フォーカスがラッピングdivに適用され、それが拒否されるため、入力がフォーカスを取得していないように見えます（コンソールでdocument.activeElementを使用してチェックします）。

問題は、実際のinput要素にどのように焦点を合わせるかです。

注：少し関係ありませんが、ReactはautoFocusプロパティを尊重します。これは、レンダリングの直後にフォーカスを設定する必要がある場合に役立ちます。それでも、プログラマティックの代わりにはなりません。仕方。

reactjsreact-jsxreact-bootstrap
10
tivoni

getInputDOMNode()の代わりにgetDOMNode()を試してください。

22
pedantech

レンダリングで

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

イベントハンドラー内

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

findDOMNodeは推奨される方法ではなくなり、Facebookによって非推奨になる可能性があるため、autoFocusプロパティ（Reactフレームワークではなく、フレームワークによって提供される）を使用する必要があります。 react-bootstrap）。これは、HTML autofocus属性のクロスブラウザーポリフィルです。

<FormControl
  autoFocus
  ...
/>

出典：

  1. FormControlに焦点を当てる
  2. モーダルで入力をフォーカスするために必要なサポート？
3
Ryan H.

FormControlはinputRef属性を提供します

それを試してみてください、

<FormControl inputRef={ref => { this.input = ref; }} />

https://react-bootstrap.github.io/components/forms/

1
keating