Cодержание

Руководство ReactJS Refs

View more Tutorials:

1- React Refs

В ReactJS, refs используются для вашей справки (reference) к элементу. В оновном, стоит избегать использовать refs в большинстве случаях. Но они имеют пользу, если вы хотите получить доступ к кнопкам (node) у DOM или элементам, созданным в методе  render().
Примечание: В данной статье я создам  Refs в стиле  ReactJS версии  16.3, так как оно легче для использования.

React.createRef()

Используйте метод  React.createRef(), чтобы создать  Refs, потом прикрепите (attach) его к элементам (Созданные в  render() ) через свойство  ref.
class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.myRef = React.createRef();
  }

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

}
Когда  Ref прикреплен (attach) к элементу, созданному в методе  render(). Вы можете ссылаться на объект  Node этого элемента через свойство  current у Ref.
const node = this.myRef.current;

Пример:

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: