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

React Refs
Callback Refs (TODO)

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

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

1. React Refs

2. Callback Refs (TODO)

Pуководства ReactJS

Pуководства ReactJS

Новейшие статьи