Table des matières

Le Tutoriel de ReactJS Refs

View more Tutorials:

1- React Refs

En  ReactJS, refs sont utilisés pour que vous fassiez référence à un élément. Fondamentalement, il est conseillé d'éviter d'utiliser les refs dans la plupart des cas. Cependant, il est utile lorsque vous souhaitez accéder aux noeuds (node) ou aux éléments DOM créés dans la méthode render().
Remarque : Dans cette leçon, je vais créer des  Refs par le style de  ReactJS la version  16.3, car elle est plus facile à utiliser.

React.createRef()

Utilisez la méthode  React.createRef() pour créer  Refs, pour attachez (attach) les aux éléments (Créés dans  render() ) via la propriété  ref.
class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef} />;
  }

}
Lorsqu'un  Ref est attaché (attach) à un élément qui est créé dans la méthode  render(). Vous pouvez faire allusion au objet  Node de cet élément via la propriété  current de  Ref.
const node = this.myRef.current;

Exemple :

refs-example.jsx
//
class SearchBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchText: "reactjs"
    };
    this.searchFieldRef = React.createRef();
  }

  clearAndFocus() {
    this.setState({ searchText: "" });
    // Focus to Input Field.
    this.searchFieldRef.current.focus();
    this.searchFieldRef.current.style.background = "#e8f8f5";
  }

  changeSearchText(event) {
    var v = event.target.value;
    this.setState((prevState, props) => {
      return {
        searchText: v
      };
    });
  }

  render() {
    return (
      <div className="search-box">
        <input
          value={this.state.searchText}
          ref={this.searchFieldRef}
          onChange={event => this.changeSearchText(event)}
        />
        <button onClick={() => this.clearAndFocus()}>Clear And Focus</button>
        
        <a href="">Reset</a>
      </div>
    );
  }
}

// Render
ReactDOM.render(<SearchBox />, document.getElementById("searchbox1"));
refs-example.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Refs</title>
      <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

      <style>
         .search-box  {
         border:1px solid #cbbfab;
         padding: 5px;
         margin: 5px;
         }
      </style>
   </head>
   <body>
      <h3>React Refs:</h3>

      <div id="searchbox1"></div>      

      <script src="refs-example.jsx" type="text/babel"></script>
   </body>
</html>

2- Callback Refs (TODO)

View more Tutorials: