web-dev-qa-db-fra.com

current est toujours null lors de l'utilisation de React.createRef

J'essayais de faire this .

Il me manque quelque chose, mais je ne comprends pas pourquoi current soit toujours null dans cet exemple.

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

Vous pouvez vérifier mon cas de test ici

javascriptreactjsref
10
Sharcoux

Parce que vous avez oublié d'attribuer le ref à un élément dom. Vous ne faites que le créer.

Écris-le comme ceci:

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>
    )
  }
}

Exemple de travail.

17
Mayank Shukla

Vous manquez le ref={this.test} prop.

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

React.createRef () est asynchrone. Par conséquent, si vous essayez d'accéder à la référence dans composantDidMount, il renverra null et renverra ultérieurement les propriétés du composant dans lequel vous faites référence.

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

C’est la bonne façon d’utiliser React.createRef () dans ce contexte.

4
Rex Raphael