Le Tutoriel de ReactJS Refs

React Refs
Callback Refs (TODO)

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/react@16.4.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/babel-standalone@6.26.0/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>

Le Tutoriel de ReactJS Refs

1. React Refs

2. Callback Refs (TODO)

Tutoriels de programmation ReactJS

Tutoriels de programmation ReactJS

Articles les plus récents