私はReact.jsを初めて使い、たった今、Reactでref
の概念を学びました。 V16.3には、新しいcreateRef APIがあります。私はこれを REACT DOC's から学ぼうとしていました-
import React from "react";
export class MyComponent extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
this.textInput.current.focus();
}
render() {
// tell React that we want to associate the <input> ref
// with the `textInput` that we created in the constructor
return (
<div>
<input
type="text"
ref={this.textInput} />
<input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}
そして、私はこのエラーを取得していました-
TypeError:__WEBPACK_IMPORTED_MODULE_0_react ___ default.a.createRefは関数ではありません
反応バージョンをアップグレードできない場合、レガシー文字列参照を使用できます( https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs =)
Ref属性に文字列を設定します:
<input
type="text"
ref="textInput" />
そして、次のようにアクセスします。
this.refs.textInput.focus();
そして、この部分を削除することを忘れないでください:
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);