web-dev-qa-db-ja.com

this.refs.somethingは「未定義」を返します

定義されたrefを持つ要素があり、最終的にページにレンダリングされます：

    <div ref="russian" ...>
       ...
    </div>

offset...などのDOM要素のプロパティにアクセスしたい。しかし、私はundefinedを取得し続けますが、その理由はわかりません。いくつかの検索の後、refsは1つのファイルにのみ適用可能であることは明らかですが、この1ページ以外では使用していません。私はこれをログに記録すると言っています：

console.log('REFS', this.refs.russian);

これは何が原因ですか？

javascriptreactjsreact-jsx
31
John Doe

refsを操作する正しい場所は、特定のReactライフサイクルメソッド内です。 ComponentDidMount 、 ComponentDidUpdate

render()メソッドからrefsを参照することはできません。 refsを扱う際の注意事項についてはこちらをご覧ください

console.log('REFS', this.refs.russian);呼び出しをComponentDidMountまたはComponentDidUpdateライフサイクルメソッドに移動する場合（React> = 14を使用している場合）、undefinedundefinedを取得しないでください結果として。

更新：また、refは上記の注意リンクに従ってステートレスコンポーネントでは動作しません

29
jurassix

子コンポーネントがマウントされる前にrefにアクセスしていないことを確認してください。例えば。 componentWillMountでは機能しません。要素がマウントされた後にref関連のコールバックを自動的に呼び出す別のパターンはthis-

<div ref={(elem)=>(console.log(elem))}/>

この表記法を使用して、深いネストでマウントされた要素を取得することもできます-

<div ref={this.props.onMounted}/>
35
hazardous

Reactバージョン16.4以降の更新

コンストラクターメソッドで、refを次のように定義します

constructor(props) {
  super(props);
  this.russian = React.createRef();
}

refを使用しているレンダーでこれを行います。

<input
  name="russian"
  ref={this.russian} // Proper way to assign ref in react ver 16.4
/>

たとえば、コンポーネントのマウントがこれを行うときにフォーカスを持ちたい場合

componentDidMount() {
  console.log(this.russian); 
  this.russian.current.focus();
 }

リファレンス ドキュメントの反応を参照

4
Adeel Imran

this.ref.current.reportValidity()を割り当てようとして、フォーム検証メソッドで同様の問題が発生していました

validate = () => {}の代わりにvalidate() {}としてこれを行っていたメソッドを書くことは助けてくれましたが、正確に、なぜ私が過去の仕事の経験で与えた習慣から覚えていた何かを正確に知りません私これ。それが助けて、誰かがこの答えを明確に明確にし、なぜこれが正確に機能するのかを願っています。

0
Statik

スタイルを使用してクラスをエクスポートする場合は、通常どおりデフォルトを削除してエクスポートしてください。

0
vũ việt hoàng vũ