codestory

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/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>

2- Callback Refs (TODO)

View more Tutorials: