Kselax.ru

Hacker Kselax – the best hacker in the world

Menu
  • Blog
  • Contacts
  • wp plugin generator
  • English
    • Русский
Menu

How to use ref in React properly

Posted on 7 May, 20197 May, 2019 by admin

Hello there!
Here in this article, I’m going to explain to you how to use react ref properly and write down a real example of the alive world

so ref is a special attribute of the React. We can add it to any element. It takes a callback function which React will execute immediately.

It uses primarily to set focus on some element but we can use it to get a value of input as well. Suppose we have a task like that: Create a React app that will have two inputs and button and store the data to the array like this

1
2
3
4
var PLACES = [
  { name: "New York", zip: "10157" },
  { name: "Rome", zip: "00123" }
];

 

It is very easy to do with refs. Look at the resolution below

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import React from 'react'
import ReactDOM from 'react-dom'
 
class App extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
      PLACES: []
    }
  }
 
  handler = () => {
    this.setState({
      PLACES: [
        ...(this.state.PLACES),
        {
          name: this.refName.value,
          zip: this.refZip.value
        }
      ]
    })
 
    this.refName.value = ''
    this.refZip.value = ''
    this.refName.focus()
  }
 
  render() {
    const { PLACES } = this.state
    console.log('PLACES = ', PLACES);
    return (
      <div>
        <h1>App</h1>
        <ul>
          {PLACES.map((e, i) =>
            <li key={i}>
              {e.name + ' ' + e.zip}
            </li>
          )}
        </ul>
        Name:
        <input
          type="text"
          ref={input => { this.refName = input}}
        />
        Zip:
        <input
          type="text"
          ref={input => { this.refZip = input}}
        />
        <button onClick={this.handler}>Button</button>
      </div>
    )
  }
}
 
 
ReactDOM.render(
  <App />,
  document.getElementById('root')
)

there is important two parts

the first how we creating refs

1
2
3
4
<input
  type="text"
  ref={input => { this.refName = input}}
/>

we use a callback function that will execute immediately. All right and the next how we use in the handler function, look at it, too

1
2
3
this.refName.value = ''
this.refZip.value = ''
this.refName.focus()

yes, you guess. It is accessible now by this.[name]. So here we are. 🙂

Use ref carefully because it’s a thing that directly manipulates the DOM. Which you think some operations are easier to implement with the ref, boldly do it otherwise use declarative methods

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • bash (1)
  • English (9)
  • JavaScript (4)
  • node.js (22)
  • photoshop (1)
  • php (3)
  • React (9)
  • sclerotic (6)
  • Ubuntu (10)
  • Uncategorized (13)
  • Wordpress (1)

Tags

Ajax apache2 automation bash chrome-extension command line editor ejs email English English-grammar framework functions git graphql handlebars hybrid app installation javascript js linux newbie node.js node.js javascript nodemailer npm objects Performance php phpmyadmin playonlinux promise rabbitmq React react-router redis reverse-proxy session shell socket.io sublime text 3 time zones ubuntu unity webpack

Recent Comments

  • damien on How to install npm and nodejs the latest versions on ubuntu
  • Cam on How to install npm and nodejs the latest versions on ubuntu
  • Pierre on socket.io with apache as a reverse proxy on the CentOS
  • admin on How to use react-router with a few languages
  • admin on How to install npm and nodejs the latest versions on ubuntu
©2021 Kselax.ru Theme by ThemeGiant