11

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 反応ドキュメントからのものです

ボタンの 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プロパティを尊重します。これは、レンダリング直後にフォーカスを設定する必要がある場合に便利です。それでも、プログラムによる方法に代わるものではありません。

4

4 に答える 4

23

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

于 2015-01-02T07:33:00.323 に答える
9

レンダリング中

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

イベントハンドラで

someHandler() {
  ReactDOM.findDOMNode(this.formControlRef).focus();
}
于 2016-08-17T19:23:39.440 に答える