web-dev-qa-db-fra.com

TypeError: __WEBPACK_IMPORTED_MODULE_0_react ___ default.a.createRef n'est pas une fonction

Je suis nouveau sur React.js et tout à l’heure, j’apprenais le concept de ref dans React. Ils ont la nouvelle API createRef dans la version 16.3. J'essayais d'apprendre cela de REACT DOC's comme ceci -

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

}

Et j'obtenais cette erreur -

TypeError: __WEBPACK_IMPORTED_MODULE_0_react ___ default.a.createRef n'est pas une fonction

Voici la capture d'écran - enter image description here

javascriptreactjsref
4
cooper

Vous ne semblez pas avoir la bonne version de react installée

Faire ceci: 

npm install --save [email protected] [email protected]
7
supra28

Si vous ne pouvez pas mettre à niveau votre version de réaction, vous pouvez utiliser les références de chaîne héritées ( https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs )

Vous définissez la chaîne pour l'attribut ref:

<input
    type="text"
    ref="textInput" />

Et y accéder comme ça:

this.refs.textInput.focus();

Et n'oubliez pas d'enlever cette partie:

this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
1
Gregor Ažbe