From d0a87bb6aa1b6e3e90c67241ab17944b29e20580 Mon Sep 17 00:00:00 2001 From: KotonoSora <26807417+KotonoSora@users.noreply.github.com> Date: Sun, 1 Jun 2025 13:42:12 +0700 Subject: [PATCH 1/3] feat(i18n): translate src/content/learn/adding-interactivity.md from English to Vietnamese --- src/content/learn/adding-interactivity.md | 254 +++++++++++++++------- 1 file changed, 173 insertions(+), 81 deletions(-) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 5c87a3e79..39a6f1cec 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -1,30 +1,122 @@ --- -title: Adding Interactivity +title: Thêm Tính Tương Tác --- -Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time. +Một số thứ trên màn hình cập nhật để phản hồi lại input của người dùng. Ví dụ, click vào thư viện ảnh sẽ chuyển đổi ảnh đang hoạt động. Trong React, data thay đổi theo thời gian được gọi là *state.* Bạn có thể thêm state cho bất kỳ Component nào, và cập nhật nó khi cần thiết. Trong chương này, bạn sẽ học cách viết các Component xử lý tương tác, cập nhật state của chúng, và hiển thị output khác nhau theo thời gian. -* [How to handle user-initiated events](/learn/responding-to-events) -* [How to make components "remember" information with state](/learn/state-a-components-memory) -* [How React updates the UI in two phases](/learn/render-and-commit) -* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot) -* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates) -* [How to update an object in state](/learn/updating-objects-in-state) -* [How to update an array in state](/learn/updating-arrays-in-state) +* [Cách xử lý sự kiện do người dùng khởi tạo](/learn/responding-to-events) +* [Cách làm cho Component "nhớ" thông tin với state](/learn/state-a-components-memory) +* [Cách React cập nhật UI trong hai giai đoạn](/learn/render-and-commit) +* [Tại sao state không cập nhật ngay sau khi bạn thay đổi nó](/learn/state-as-a-snapshot) +* [Cách xếp hàng đợi nhiều lần cập nhật state](/learn/queueing-a-series-of-state-updates) +* [Cách cập nhật một object trong state](/learn/updating-objects-in-state) +* [Cách cập nhật một array trong state](/learn/updating-arrays-in-state) -## Responding to events {/*responding-to-events*/} +# Thêm Tính Tương Tác {/*thêm-tính-tương-tác*/} -React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on. +Trong phần này, bạn sẽ học cách làm cho Ứng dụng React của mình trở nên tương tác hơn bằng cách bắt sự kiện và cập nhật state. -Built-in components like ` + ); +} +``` + +Ở đây, thuộc tính `onClick` được sử dụng để bắt sự kiện click chuột trên button. Khi button được click, hàm `handleClick` sẽ được gọi. + +## Cập Nhật State {/*cập-nhật-state*/} + +Để làm cho UI thay đổi dựa trên hành động của người dùng, bạn cần cập nhật state. React cung cấp hook `useState` để quản lý state trong Functional Components. + +```jsx +import { useState } from 'react'; + +function MyButton() { + const [count, setCount] = useState(0); + + function handleClick() { + setCount(count + 1); + } + + return ( + + ); +} +``` + +Ở ví dụ trên, mỗi lần button được click, state `count` sẽ tăng lên 1 và giao diện sẽ được render lại để hiển thị giá trị mới. + +## Kết Hợp Bắt Sự Kiện và State {/*kết-hợp-bắt-sự-kiện-và-state*/} + +Bạn có thể kết hợp nhiều sự kiện và state để xây dựng những Ứng dụng phức tạp hơn. Ví dụ, một form nhập liệu: + +```jsx +import { useState } from 'react'; + +function MyForm() { + const [name, setName] = useState(''); + + function handleChange(e) { + setName(e.target.value); + } + + function handleSubmit(e) { + e.preventDefault(); + alert(`Xin chào, ${name}!`); + } + + return ( +
+ + +
+ ); +} +``` + +Ở đây, thuộc tính `onChange` được sử dụng để cập nhật state `name` mỗi khi người dùng nhập liệu, và `onSubmit` để xử lý khi form được gửi. + +## Lưu Ý {/*lưu-ý*/} + +- Những thuộc tính sự kiện trong React được viết theo camelCase, ví dụ: `onClick`, `onChange`. +- Bạn nên tránh cập nhật state trực tiếp mà hãy luôn sử dụng hàm cập nhật state như `setCount`, `setName`. +- Khi state thay đổi, React sẽ tự động render lại những Element liên quan. + +## Tổng Kết {/*tổng-kết*/} + +- Sử dụng thuộc tính sự kiện để bắt sự kiện người dùng. +- Quản lý state với hook `useState`. +- Kết hợp bắt sự kiện và state để xây dựng Ứng dụng tương tác. + +Bạn đã sẵn sàng để xây dựng những Ứng dụng React tương tác hơn! + +## Phản hồi sự kiện {/*responding-to-events*/} + +React cho phép bạn thêm *event handler* vào JSX của mình. Event handler là những Function của riêng bạn sẽ được kích hoạt để phản hồi lại tương tác của người dùng như click, hover, focus vào các input của form, và nhiều hơn nữa. + +Các Component tích hợp sẵn như ` ); @@ -68,22 +160,22 @@ button { margin-right: 10px; } -Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers. +Đọc **[Phản Hồi Sự Kiện](/learn/responding-to-events)** để học cách thêm event handler. -## State: a component's memory {/*state-a-components-memory*/} +## State: bộ nhớ của Component {/*state-a-components-memory*/} -Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.* +Component thường cần thay đổi những gì hiển thị trên màn hình kết quả của một tương tác. Nhập vào form phải cập nhật trường input, click "tiếp theo" trên carousel ảnh phải thay đổi ảnh nào được hiển thị, click "mua" đặt sản phẩm vào giỏ hàng. Component cần "nhớ" những thứ: giá trị input hiện tại, ảnh hiện tại, giỏ hàng. Trong React, loại bộ nhớ cụ thể của Component này được gọi là *state.* -You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it. +Bạn có thể thêm state cho một Component với Hook [`useState`](/reference/react/useState). *Hook* là những Function đặc biệt cho phép Component của bạn sử dụng các tính năng của React (state là một trong những tính năng đó). Hook `useState` cho phép bạn khai báo một biến state. Nó nhận state ban đầu và trả về một cặp giá trị: state hiện tại, và một Function setter state cho phép bạn cập nhật nó. ```js const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); ``` -Here is how an image gallery uses and updates state on click: +Đây là cách một thư viện ảnh sử dụng và cập nhật state khi click: @@ -112,17 +204,17 @@ export default function Gallery() { return ( <>

{sculpture.name} - by {sculpture.artist} + bởi {sculpture.artist}

- ({index + 1} of {sculptureList.length}) + ({index + 1} của {sculptureList.length})

{showMore &&

{sculpture.description}

} -Read **[State: A Component's Memory](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction. +Đọc **[State: Bộ Nhớ Của Component](/learn/state-a-components-memory)** để học cách nhớ một giá trị và cập nhật nó khi có tương tác. -## Render and commit {/*render-and-commit*/} +## Render và commit {/*render-and-commit*/} -Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior. +Trước khi Component của bạn được hiển thị trên màn hình, chúng phải được render bởi React. Hiểu các bước trong quy trình này sẽ giúp bạn suy nghĩ về cách code của bạn thực thi và giải thích hành vi của nó. -Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps: +Hãy tưởng tượng rằng Component của bạn là những đầu bếp trong bếp, lắp ráp những món ăn ngon từ các nguyên liệu. Trong kịch bản này, React là người phục vụ nhận yêu cầu từ khách hàng và mang đến cho họ đơn hàng. Quy trình yêu cầu và phục vụ UI này có ba bước: -1. **Triggering** a render (delivering the diner's order to the kitchen) -2. **Rendering** the component (preparing the order in the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. **Kích hoạt** một render (giao đơn hàng của khách đến bếp) +2. **Rendering** Component (chuẩn bị đơn hàng trong bếp) +3. **Commit** đến DOM (đặt đơn hàng lên bàn) - - - + + + -Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update. +Đọc **[Render và Commit](/learn/render-and-commit)** để học về vòng đời của một bản cập nhật UI. -## State as a snapshot {/*state-as-a-snapshot*/} +## State như một snapshot {/*state-as-a-snapshot*/} -Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first! +Không giống như các biến JavaScript thông thường, React state hoạt động giống như một snapshot hơn. Thiết lập nó không thay đổi biến state mà bạn đã có, mà thay vào đó kích hoạt một re-render. Điều này có thể đáng ngạc nhiên lúc đầu! ```js console.log(count); // 0 -setCount(count + 1); // Request a re-render with 1 -console.log(count); // Still 0! +setCount(count + 1); // Yêu cầu một re-render với 1 +console.log(count); // Vẫn là 0! ``` -This behavior helps you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later? +Hành vi này giúp bạn tránh những bug tinh vi. Đây là một Ứng dụng chat nhỏ. Hãy thử đoán xem điều gì sẽ xảy ra nếu bạn nhấn "Gửi" trước và *sau đó* thay đổi người nhận thành Bob. Tên của ai sẽ xuất hiện trong `alert` sau năm giây? @@ -279,14 +371,14 @@ export default function Form() { function handleSubmit(e) { e.preventDefault(); setTimeout(() => { - alert(`You said ${message} to ${to}`); + alert(`Bạn đã nói ${message} với ${to}`); }, 5000); } return (