You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/blog/2015-03-30-community-roundup-26.md
-5
Original file line number
Diff line number
Diff line change
@@ -29,12 +29,7 @@ Colin also [blogged about his experience using React Native](http://blog.scottlo
29
29
30
30
Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :)
Copy file name to clipboardExpand all lines: content/blog/2019-02-23-is-react-translated-yet.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,7 @@ We started of with an initial trial period of three languages: Spanish, Japanese
43
43
44
44
After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://isreacttranslatedyet.com), to track progress on the different translations. We started *10* new translations on our first day alone!
45
45
46
-
Because of the automation, the rest of the maintance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
46
+
Because of the automation, the rest of the maintenance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
Copy file name to clipboardExpand all lines: content/docs/add-react-to-a-website.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -110,7 +110,7 @@ Commonly, you might want to display React components in multiple places on the H
110
110
111
111
### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production}
112
112
113
-
Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users.
113
+
Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users.
114
114
115
115
If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`:
When Webpack comes across this syntax, it automatically starts code-splitting
104
104
your app. If you're using Create React App, this is already configured for you
105
-
and you can [start using it](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported
105
+
and you can [start using it](https://facebook.github.io/create-react-app/docs/code-splitting) immediately. It's also supported
106
106
out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
107
107
108
108
If you're setting up Webpack yourself, you'll probably want to read Webpack's
Copy file name to clipboardExpand all lines: content/docs/handling-events.md
+25-25
Original file line number
Diff line number
Diff line change
@@ -1,43 +1,43 @@
1
1
---
2
2
id: handling-events
3
-
title: Handling Events
3
+
title: Việc Bắt các Sự kiện
4
4
permalink: docs/handling-events.html
5
5
prev: state-and-lifecycle.html
6
6
next: conditional-rendering.html
7
7
redirect_from:
8
8
- "docs/events-ko-KR.html"
9
9
---
10
10
11
-
Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:
11
+
Việc bắt sự kiện của những element React rất giống với những element DOM. Có một số khác biệt về cú pháp như:
12
12
13
-
* React events are named using camelCase, rather than lowercase.
14
-
*With JSX you pass a function as the event handler, rather than a string.
13
+
*Những sự kiện của React được đặt tên theo dạng camelCase, thay vì lowercase.
14
+
*Với JSX, bạn có thể sử dụng "hàm" (function) để bắt sự kiện thay vì phải truyền vào một chuỗi.
15
15
16
-
For example, the HTML:
16
+
Ví dụ, đoạn HTML sau:
17
17
18
18
```html
19
19
<buttononclick="activateLasers()">
20
20
Activate Lasers
21
21
</button>
22
22
```
23
23
24
-
is slightly different in React:
24
+
sẽ có đôi chút khác biệt trong React:
25
25
26
26
```js{1}
27
27
<button onClick={activateLasers}>
28
28
Activate Lasers
29
29
</button>
30
30
```
31
31
32
-
Another difference is that you cannot return `false`to prevent default behavior in React. You must call `preventDefault`explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
32
+
Một điểm khác biệt nữa trong React là bạn không thể trả về `false`để chặn những hành vi mặc định mà phải gọi `preventDefault`trực tiếp. Lấy ví dụ với đoạn HTML sau, để chặn hành vi mặc định của đường dẫn là mở trang mới, bạn có thể viết:
33
33
34
34
```html
35
35
<ahref="#"onclick="console.log('The link was clicked.'); return false">
36
36
Click me
37
37
</a>
38
38
```
39
39
40
-
In React, this could instead be:
40
+
Còn trong React, bạn có thể làm như thế này:
41
41
42
42
```js{2-5,8}
43
43
function ActionLink() {
@@ -54,19 +54,19 @@ function ActionLink() {
54
54
}
55
55
```
56
56
57
-
Here, `e`is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. See the [`SyntheticEvent`](/docs/events.html)reference guide to learn more.
57
+
Ở đây, `e`là một sự kiện ảo. React định nghĩa những sự kiện ảo này dựa trên [chuẩn W3C](https://www.w3.org/TR/DOM-Level-3-Events/), nên bạn không cần lo lắng về sự tương thích giữa những browser. Hãy tham khảo tài liệu về [`SyntheticEvent`](/docs/events.html)để tìm hiểu thêm.
58
58
59
-
When using React you should generally not need to call`addEventListener`to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.
59
+
Khi làm việc với React, bạn thường không phải gọi`addEventListener`để gắn listener cho element DOM khi nó được khởi tạo. Thay vào đó, bạn chỉ cần gắn listener ngay lần đầu element được render.
60
60
61
-
When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this`Toggle`component renders a button that lets the user toggle between "ON" and "OFF" states:
61
+
Khi bạn định nghĩa component bằng [class ES6](https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Classes), một mẫu thiết kế phổ biến là sử dụng phương thức của class để bắt sự kiện. Ví dụ, component`Toggle`dưới đây render một chiếc nút để người dùng thay đổi giữa state “ON” và “OFF":
62
62
63
63
```js{6,7,10-14,18}
64
64
class Toggle extends React.Component {
65
65
constructor(props) {
66
66
super(props);
67
67
this.state = {isToggleOn: true};
68
68
69
-
// This binding is necessary to make `this` work in the callback
69
+
// Phép "ràng buộc" (bind) này là cần thiết để `this` hoạt động trong callback
70
70
this.handleClick = this.handleClick.bind(this);
71
71
}
72
72
@@ -93,16 +93,16 @@ ReactDOM.render(
93
93
94
94
[**Try it on CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
95
95
96
-
You have to be careful about the meaning of `this`in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind`this.handleClick`and pass it to`onClick`, `this`will be `undefined`when the function is actually called.
96
+
Bạn phải cẩn thận về ý nghĩa của `this`trong những callback JSX. Trong JavaScript, những phương thức của class mặc định không bị [ràng buộc](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind). Nếu bạn quên ràng buộc`this.handleClick`và truyền nó vào`onClick`, `this`sẽ có giá trị là `undefined`khi phương thức này được thực thi.
97
97
98
-
This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()`after it, such as `onClick={this.handleClick}`, you should bind that method.
98
+
Đây không phải là tính chất của React mà là một phần trong [cách những hàm JavaScript hoạt động](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Thông thường, nếu bạn trỏ tới phương thức mà không có `()`theo sau như `onClick={this.handleClick}`, bạn nên ràng buộc phương thức đó.
99
99
100
-
If calling `bind`annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks:
100
+
Nếu bạn thấy việc gọi `bind`phiền phức thì có hai giải pháp. Trong trường hợp bạn đang sử dụng [cú pháp thuộc tính class public](https://babeljs.io/docs/plugins/transform-class-properties/) thử nghiệm, bạn có thể dùng những thuộc tính class để ràng buộc callback một cách chính xác:
101
101
102
102
```js{2-6}
103
103
class LoggingButton extends React.Component {
104
-
// This syntax ensures `this` is bound within handleClick.
105
-
// Warning: this is *experimental* syntax.
104
+
// Cú pháp này đảm bảo `this` được ràng buộc trong handleClick.
105
+
// Lưu ý: đây là cú pháp *thử nghiệm*.
106
106
handleClick = () => {
107
107
console.log('this is:', this);
108
108
}
@@ -117,9 +117,9 @@ class LoggingButton extends React.Component {
117
117
}
118
118
```
119
119
120
-
This syntax is enabled by default in[Create React App](https://github.com/facebookincubator/create-react-app).
120
+
Cú pháp này được bật theo mặc định trong[Create React App](https://github.com/facebookincubator/create-react-app).
121
121
122
-
If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)in the callback:
122
+
Nếu bạn không sử dụng cú pháp thuộc tính class, bạn có thể dùng "hàm rút gọn" [arrow function](https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Functions/Arrow_functions)trong callback:
123
123
124
124
```js{7-9}
125
125
class LoggingButton extends React.Component {
@@ -128,7 +128,7 @@ class LoggingButton extends React.Component {
128
128
}
129
129
130
130
render() {
131
-
// This syntax ensures `this` is bound within handleClick
131
+
// Cú pháp này đảm bảo `this` được ràng buộc trong handleClick
132
132
return (
133
133
<button onClick={(e) => this.handleClick(e)}>
134
134
Click me
@@ -138,17 +138,17 @@ class LoggingButton extends React.Component {
138
138
}
139
139
```
140
140
141
-
The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.
141
+
Vấn đề với cú pháp này nằm ở chỗ một callback khác sẽ được khởi tạo mỗi khi `LogginButton` render. Điều này ổn với đa số trường hợp. Tuy nhiên, nếu callback này được truyền duới dạng prop xuống những component con, những component này sẽ bị render lại. Nói chung, chúng tôi khuyến khích việc ràng buộc ở constructor hoặc sử dụng cú pháp thuộc tính class để ngăn chặn vấn đề về hiệu suất này.
142
142
143
-
## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers}
143
+
## Truyền Tham số vào Hàm Bắt Sự kiện {#passing-arguments-to-event-handlers}
144
144
145
-
Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if `id`is the row ID, either of the following would work:
145
+
Trong một vòng lặp, việc truyền thêm tham số vào hàm bắt sự kiện khá phổ biến. Nếu `id`là số định danh của một hàng, thì hai ví dụ duới đây đều hoạt động được:
The above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)and[`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively.
152
+
Hai dòng code trên là tương đương, và lần lượt sử dụng [hàm rút gọn](https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Functions/Arrow_functions)và[`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind).
153
153
154
-
In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with`bind`any further arguments are automatically forwarded.
154
+
Trong cả hai trường hợp, tham số `e`, đại diện cho sự kiện React, sẽ được truyền là tham số thứ hai sau số định danh. Với hàm rút gọn, chúng ta phải truyền nó trực tiếp, nhưng với`bind`thì những tham số còn lại sẽ tự động nối tiếp.
0 commit comments