codestory

Die Anleitung zu ReactJS Refs

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

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:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.