web-dev-qa-db-ja.com

React refsを使用してReduxフォームフィールドにフォーカスする方法は？

React refsを使用して、マウント時にRedux-Formフィールドにフォーカスしようとしています。

componentDidMountでthis.refs.title.getRenderedComponent().focus()を実行しようとすると、次のエラーがスローされます。

edit_fund.js:77 Uncaught TypeError: Cannot read property 'getRenderedComponent' of undefined

Console.log this.refsを実行すると、ほとんどが空のオブジェクトであり、「title」がrefであると識別されることがありますが、信頼性はありません。

参照を誤って使用していますか？私のコードは参考のために以下にあります。

componentDidMount = () => {
  this.refs.title
  .getRenderedComponent()
  .focus();
}

.。

 <Field
    id="title"
    name="title"
    component={FormInput}
    type="text"
    ref="title" withRef
 />
javascriptreactjsredux-formreact-redux-form
7
Trey Granderson

コールバック関数を使用してrefを設定してみてください。

ref={(input) => { this.title = input; }}

次に、これを使用して、基になるDOMノードを取得します。

ReactDOM.findDOMNode(this.title).focus();

dOM入力要素が別の要素でラップされている場合：

ReactDOM.findDOMNode(this.title).getElementsByTagName("input")[0].focus()

Reactによると、文字列でrefを使用するドキュメントにはいくつかの問題があります。詳細については docs を確認してください。

7
Bartek Fryzowicz

Redux-formと Material UI を使用し、次のことを行う必要がありました。 MaterialCheckboxFieldとMaterialTextFieldは、_material-ui/{Checkbox,TextField}_をラップするプロジェクトのカスタムコンポーネントです。

MaterialTextFieldをクラスコンポーネントに変換しました（ React docs に規定されています）。

にはインスタンスがないため、functionコンポーネントでref属性を使用することはできません。

_import { findDOMNode } from "react-dom";
_

フィールド設定フォーカス（render()メソッド内）：

_<Field
  component={MaterialCheckboxField}
  label="Checkbox"
  name="..."
  onClick={event => {
    if (!event.target.checked) return;
    // focus() field after grace period
    // oddity of Material UI, does not work without
    window.setTimeout(() => this.textField.focus(), 150);
  }}
/>
_

マテリアルUI固有
setTimeout() from this SO question 。@ Lukasのコメントを検討してください。

"このコードはスローされる可能性があります。さらに良いのは、返されたsetTimeout() IDをコンポーネントに保存し、componentWillUnmount()でタイムアウトがまだ存在するかどうかを確認してクリアすることです。もしそうなら」

フォーカスを受け取るフィールド（render()メソッド内）：

_<Field
  component={MaterialTextField}
  label="Text field"
  name="..."
  ref={ref => {
    const node = findDOMNode(ref);
    if (node) {
      // Material UI wraps input element, 
      // use querySelector() to obtain reference to it
      // if not using MUI, querySelector() likely not needed
      this.textField = node.querySelector("input");
    }
  }}
  withRef
/>
_

注
Material UI _0.x_を使用していますが、それがReact.CreateRef()が機能しなかった理由かどうかわかりません（推奨されるアプローチ React 16. ）。

0
Greg K