Inhaltsverzeichnis

Die Anleitung zu ReactJS Refs

View more Tutorials:

1- React Refs

Im  ReactJS wird  refs als ein Referenz (reference) auf einem Elemen benutzt. Im Grunde sollen Sie  refs in die meisten Situationen nicht verwenden. Allerdings ist es nutzlich wenn Sie zu den node vom  DOM or zu den in die Methode render() erstellten Element zugreifen.
Achtung: In dieser Unterricht werde ich  Refs nach dem Stil vom  ReactJS der Version 16.3 erstellen, denn es ist einfach zu verwenden

React.createRef()

Verwenden Sie die Methode  React.createRef() um  Refs zu erstellen, dann fügen Sie es zu den Elementen, (die in  render() erstellt werden) durch das Attribut  ref ​​​​​​​bei.
class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.myRef = React.createRef();
  }

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

}
Wenn ein  Ref zu einem in der Methode  render() erstellten Element beigefügt wird, können Sie auf dem Objekt   Node dieses Element durch das Attribut  current vom  Ref zuweisen.
const node = this.myRef.current;

Zum Beispiel:

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: