web-dev-qa-db-fra.com

React 0.13 this.getDOMNode () équivalent à React.findDOMNode ()

Cela fonctionne parfaitement dans React version 0.12:

componentDidMount: function () {
    var dom = this.getDOMNode();
}

La variable dom obtient le nœud DOM réel du composant rendu. Toutefois, la conversion de ce paramètre en React 0.13 ne fonctionne pas comme prévu:

componentDidMount: function () {
    var dom = React.findDOMNode();
    // dom is undefined
}

J'ai essayé React.findDOMNode(this) qui ne fonctionne pas non plus. Fondamentalement, j'essaie simplement d'extraire le nœud dom de niveau supérieur rendu par la fonction de rendu sans utiliser de réf. Est-ce possible?

reactjs
38
eriklharper

Update React v0.14 +

Dans React v0.14 + cela a changé , vous devez maintenant utiliser le module react-dom :

import ReactDOM from 'react-dom';

ReactDOM.findDOMNode(this);

ES6

class Test extends React.Component {
  componentDidMount() {
    const element = ReactDOM.findDOMNode(this);
    console.log(element);
    alert(element);
  }
  
  render() {
    return (
      <div>test</div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById('r'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="r" />

ES5

var Test = React.createClass({
  componentDidMount: function() {
    var dom = ReactDOM.findDOMNode(this);
    console.log(dom);
    alert(dom);
  },
  render: function() {
    return React.createElement('div', null, 'test');
  }
});

ReactDOM.render(React.createElement(Test), document.getElementById('r'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="r" />

React v0.13 et inférieur

Passer ceci comme paramètre devrait certainement fonctionner:

React.findDOMNode(this);

Sinon, il se peut que quelque chose d'autre se passe. Voir la démo ci-dessous:

var Test = React.createClass({
  componentDidMount: function() {
    var dom = React.findDOMNode(this);
    console.log(dom);
    alert(dom);
  },
  render: function() {
    return React.DOM.div(null, 'test');
  }
});

React.render(React.createElement(Test), document.getElementById('r'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>
<div id="r"></div>

53
Austin Greco

Notez que depuis React v0.14

React.findDOMNode devient ReactDom.findDOMNode(this); où

var ReactDom = require('react-dom');

Comme expliqué dans https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

42
Emile

React 15.0.1 Requiert cette syntaxe: ReactDOM.findDOMNode

par exemple. 

var x = ReactDOM.findDOMNode(this.refs.author);
17
Damian Green

Pour les éléments plus complexes tels que les composants React créés sur des éléments DOM standard, refs nous donne uniquement le premier élément DOM (élément racine du composant). Il est donc parfois nécessaire de trouver le noeud souhaité à l'intérieur. Le bon exemple est Material-Ui TextField composant et comment nous pouvons en tirer une valeur.

1. Importations requises

import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
import ReactDOM from 'react-dom';

2.Virtual dom et ref="variable"

 <TextField floatingLabelText="Some title" ref="title" />

3.Query à l'intérieur de TextField:

ReactDOM.findDOMNode(this.refs.title).querySelector("input").value

ou pour multiligne:

ReactDOM.findDOMNode(this.refs.title).querySelector("textarea").value

Nous commençons à partir du conteneur TextField et en utilisant la requête DOM standard querySelector obtenir l'élément d'entrée recherché. Cette solution fonctionne avec tous les composants complexes, nous pouvons toujours interroger à l'intérieur. Testé sur React (15.3.2).

2
Maciej Sikora

Je pense que vous n'avez pas besoin d'utiliser ReactDOM.findDOMNode, vous pouvez utiliser un simple e.target.innerHTML. Dans cette option, vous n'avez pas besoin d'importer ReactDOM.

0
kris_IV