Tự học ReactJS: Sử dụng useState

Thông thường một ứng dụng tương tác với người dùng cần phải quản lí state ở đâu đó. Trong React, bạn sẽ sử dụng một hàm đặc biệt gọi là “hooks” để làm điều đó. Một số hooks có sẵn như sau:

  • React.useState
  • React.useEffect
  • React.useContext
  • React.useRef
  • React.useReducer

Những function đặc biệt này bạn có thể gọi trong React component để lưu data(như state) hoặc thực hiện những actions như side-effects. Bên cạnh đó, còn có một số hooks đặc biệt khác chúng ta sẽ bàn chi tiết ở những bài sau. Nhưng 90% bạn sẽ chỉ cần những hook ở trên.

Mỗi hook có API khác nhau. Một số return về một giá trị(như React.useRefReact.useContext), một số khác trả về cặp giá trị (như React.useStateReact.useReducer), một số khác không trả về giá trị nào (như React.useEffect)

Sau đây là một ví dụ về một component sử dụng useState hook và onClick event để update state:

function Counter() {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(count + 1)
  return <button onClick={increment}>{count}</button>
}

React.useState là một function nhận vào một tham số là state ban đầu. Ví dụ ở đây giá trị khởi tạo của count là 0.

React.useState trả về một cặp giá trị. Nó trả về một mảng gồm hai giá trị. Giá trị đầu tiên là state và giá trị thứ hai là hàm để update state đó mỗi khi cần. Bạn có thể đặt tên theo ý của bạn, nhưng convention đa số mọi người thường dùng là đặt tên cho state, sau đó thêm tiền tố set và trước tên state đó. Như ví dụ ở trên là count setCount.

State được định nghĩa là những dữ liệu sẽ thay đổi theo thời gian. Nó hoạt động thế nào? Khi một button được click, hàm increment được gọi và chúng ta cập nhật giá trị count bằng hàm setCount.

Khi mà chúng ta gọi setCount, React sẽ re-render(vẽ lại) component của chúng ta. Khi render, toàn bộ Counter function sẽ được chạy lại. Cho nên khi React.useState được gọi ở lần này, giá trị của nó là giá trị chúng ta vừa setCount. Nó cứ tiếp tục như thế cho đến khi component được phá bỏ(unmounted)

Hiên thị tên sau khi nhập vào input

Giả sử chúng ta có một form như trên. Bạn có thể gõ vào Name và sau đó in giá trị đó ra. Hãy tạo một component Greeting để quản lí state của input name.

import React from 'react'

function Greeting() {
  // 💣  xoá biến này và sử dụng React.useState quản lí state name
  const name = ''

  function handleChange(event) {
    // 🐨 cập nhật name ở đây với giá tri từ event.target.value
  }

  return (
    <div>
      <form>
        <label htmlFor="name">Name: </label>
        <input onChange={handleChange} id="name" />
      </form>
      {name ? <strong>Hello {name}</strong> : 'Please type your name'}
    </div>
  )
}

function App() {
  return <Greeting />
}

export default App

Đáp án:

import * as React from 'react'

function Greeting() {
  const [name, setName] = React.useState('')

  function handleChange(event) {
    setName(event.target.value)
  }

  return (
    <div>
      <form>
        <label htmlFor="name">Name: </label>
        <input value={name} onChange={handleChange} id="name" />
      </form>
      {name ? <strong>Hello {name}</strong> : 'Please type your name'}
    </div>
  )
}

function App() {
  return <Greeting />
}

export default App

Truyền vào initialName

Hãy truyền vào một props để component Greeting khởi tạo giá trị đó cho state name. Quá đơn giản phải không nào!

import * as React from 'react'

function Greeting({initialName = ''}) {
  const [name, setName] = React.useState(initialName)
  function handleChange(event) {
    setName(event.target.value)
  }
  return (
    <div>
      <form>
        <label htmlFor="name">Name: </label>
        <input value={name} onChange={handleChange} id="name" />
      </form>
      {name ? <strong>Hello {name}</strong> : 'Please type your name'}
    </div>
  )
}

function App() {
  return <Greeting initialName="Kody" />
}

export default App

thaunguyen.com via Epic React by Kent C.Dodds

3 Comments

Leave a Reply

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