web-dev-qa-db-ja.com

React.createRefを使用する場合、currentは常にnullです

this を実行しようとしていました。

私は何かを見逃しているに違いありませんが、この例ではcurrentが常にnullである理由がわかりません。

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.test = React.createRef();
  }
  render() {
    return <div className="App">current value : {this.test.current + ""}</div>;
  }
}

私のテストケースを確認できます here

javascriptreactjsref
10
Sharcoux

Refをdom要素に割り当てるのを忘れたからです。あなたはそれを作成しているだけです。

次のように書きます：

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.test = React.createRef();
  }

  handleClick = () => alert(this.test.current.value)

  render() {
    return (
      <div className="App">
        current value : {(this.test.current || {}).value}
        <input ref={this.test} />
        <button onClick={this.handleClick}>Get Value</button>
      </div>
    )
  }
}

実施例

17
Mayank Shukla

ref={this.test}小道具がありません。

return (
  <div className="App" ref={this.test}>
    current value : {this.test.current + ""}
  </div>
);
5
AKX

React.createRef（）は非同期であるため、componentDidMountのrefにアクセスしようとすると、nullを返し、後で参照しているコンポーネントのプロパティを返します。

componentDidMount(): void {
      if (this.viewShot && this.viewShot.current) {
          this.viewShot.current.capture().then((uri) => {
        console.log('do something with ', uri);
          });
      }
  }

これは、このコンテキストでReact.createRef（）を使用する正しい方法です。

4
Rex Raphael