useStatelà một trong những React Hooks cơ bản nhất, được sử dụng để quản lý state trong các ứng dụng React. Khi sử dụng useState, bạn có thể dễ dàng cập nhật và truy xuất các giá trị state trong ứng dụng của mình. Điều này giúp cho việc quản lý state trở nên đơn giản hơn và giúp tăng tính tương tác và hiệu suất của ứng dụng React.
Cách sử dụng useState
import React, { useState } from 'react';
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> Counter() {
// Khai báo biến state và hàm để cập nhật state
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Trong ví dụ trên, biến state count được khởi tạo với giá trị ban đầu là 0, và hàm setCount được sử dụng để cập nhật giá trị của state count khi người dùng click vào nút. Bằng cách sử dụng useState, bạn có thể dễ dàng quản lý state của ứng dụng React của mình.
Khai báo nhiều State trong component
Để khai báo nhiều state trong một component, bạn có thể sử dụng nhiều useState hooks. Ví dụ:
import React, { useState } from 'react';
function Counter() {
// Khai báo biến state và hàm để cập nhật state
const [count, setCount] = useState(0);
// Khai báo một biến state khác và hàm để cập nhật state
const [name, setName] = useState('John');
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
<p>Hello, {name}!</p>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
);
}
Trong ví dụ trên, chúng ta khai báo hai biến state count và name bằng cách sử dụng hai useState hooks khác nhau. Điều này cho phép chúng ta quản lý nhiều state trong cùng một component và cập nhật chúng một cách độc lập.
Kết luận và bài viết có liên quan
Bài viết có liên quan :
Cách sử dụng boostrap icon và font awesome icon vào trong React Js
Sử dụng axios để gọi một API trong React Js Các phương thức xử lý mảng (Array) phổ biến trong JavaScript
Tìm hiểu về Redux Toolkit, một phiên bản mới của Redux trong React Js
