diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 5c87a3e79..c5033361e 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -1,30 +1,30 @@ --- -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 theo phản hồi đầu vào của người dùng. Ví dụ, nhấp vào thư viện ảnh sẽ chuyển đổi ảnh đang được hiển thị. Trong React, dữ liệu thay đổi theo thời gian được gọi là *state*. Bạn có thể thêm state vào 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ị kết quả 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ý các 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ử lý nhiều lần cập nhật state liên tiếp](/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*/} +## Bắt sự kiện {/*responding-to-events*/} -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. +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 các tương tác của người dùng như nhấp chuột, di chuột, focus vào input của form, và nhiều hơn nữa. -Built-in components like ` ); @@ -68,22 +68,22 @@ button { margin-right: 10px; } -Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers. +Đọc **[Bắt 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.* +Những component thường cần thay đổi những gì hiển thị trên màn hình theo kết quả của một tương tác. Gõ vào form sẽ cập nhật trường input, nhấp "tiếp theo" trên carousel ảnh sẽ thay đổi ảnh nào được hiển thị, nhấp "mua" sẽ đưa sản phẩm vào giỏ hàng. Những component cần "nhớ" các 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 vào một component với Hook [`useState`](/reference/react/useState). *Hook* là những function đặc biệt cho phép những component của bạn sử dụng các tính năng 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 nhấp: @@ -112,17 +112,17 @@ export default function Gallery() { return ( <>

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

- ({index + 1} of {sculptureList.length}) + ({index + 1} trên {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 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 những 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 quá 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 những component của bạn là những đầu bếp trong nhà bếp, pha chế những món ăn ngon từ 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. Quá trình yêu cầu và phục vụ UI 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 (chuyển đơn hàng của khách đến nhà bếp) +2. **Render** component (chuẩn bị đơn hàng trong nhà bếp) +3. **Commit** vào DOM (đặt đơn hàng lên bàn) @@ -251,21 +251,21 @@ Imagine that your components are cooks in the kitchen, assembling tasty dishes f -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òng đời của một lầ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ư những 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ể gây 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 *rồi sau đó* thay đổi người nhận thành Bob. Tên của ai sẽ xuất hiện trong `alert` năm giây sau? @@ -279,14 +279,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 (