React Forms

Giống như trong HTML, React sử dụng các form để cho phép người dùng tương tác với trang web.

Thêm các Form trong React

Chúng ta thêm một form với React giống như bất kỳ phần tử nào khác:

Ví dụ sau sẽ thêm vào một form để cho phép người dùng nhập tên của họ:

Đoạn code này sẽ hoạt động như bình thường, form sẽ được gửi và trang web sẽ được làm mới.

Nhưng đây thường không phải là điều chúng ta muốn xảy ra trong React.

Chúng ta muốn ngăn chặn hành vi mặc định này và cho phép React kiểm soát form.

Xử lý các Form

Xử lý các form là cách chúng ta xử lý dữ liệu khi nó thay đổi giá trị hoặc được gửi.

Trong HTML, dữ liệu của form thường được xử lý bởi DOM.

Trong React, dữ liệu của form thường được xử lý bởi các component.

Khi dữ liệu được xử lý bởi các component, tất cả các dữ liệu được lưu trữ trong component state.

Chúng ta có thể kiểm soát các thay đổi bằng cách thêm hàm xử lý sự kiện trong thuộc tính onChange.

Chúng ta có thể sử dụng useState Hook để theo dõi giá trị của mỗi input và cung cấp một "nguồn thông tin chính xác duy nhất" cho toàn bộ ứng dụng.

Ghi chú: Hãy xem phần React Hook để biết thêm thông tin về Hook.

Ví dụ sau sẽ sử dụng useState Hook để quản lý các input:

Gửi các Form

Chúng ta có thể kiểm soát hành động gửi dữ liệu bằng cách thêm một hàm xử lý sự kiện trong thuộc tính onSubmit của phần tử <form>:

Ví dụ sau sẽ thêm một submit button và một hàm xử lý sự kiện trong thuộc tính onSubmit:

Nhiều trường input

Chúng ta có thể kiểm soát giá trị của nhiều trường input bằng cách thêm thuộc tính name vào mỗi phần tử.

Chúng ta sẽ khởi tạo state với một đối tượng rỗng.

Để truy cập các trường trong hàm xử lý sự kiện chúng ta sử dụng cú pháp event.target.name và event.target.value.

Để cập nhật state, chúng ta sử dụng cặp dấu ngoặc vuông xung quanh tên của thuộc tính.

Ví dụ sau sẽ viết một form với hai trường input:

Ghi chú: Chúng ta sử dụng cùng một hàm xử lý sự kiện cho cả hai trường input, chúng ta có thể viết hàm xử lý sự kiện cho mỗi input, nhưng điều này mang lại cho chúng ta code sạch hơn nhiều và là cách ưa thích trong React.

Textarea

Phần tử textarea trong React hơi khác so với HTML thông thường.

Trong HTML, giá trị của một textarea là đoạn văn bản ở giữa thẻ bắt đầu <textarea> và thẻ kết thúc </textarea>.

Trong React giá trị của một textarea được đặt trong thuộc tính value. Chúng ta sẽ sử dụng useState Hook để quản lý giá trị của textarea:

Ví dụ sau là một textarea đơn giản với một số nội dung:

Select

Một danh sách thả xuống, hay còn gọi là một select box, trong React cũng có một chút khác biệt so với HTML.

Trong HTML, giá trị được chọn trong danh sách thả xuống được định nghĩa với thuộc tính selected:

Trong React, giá trị được chọn được định nghĩa với thuộc tính value trong thẻ select:

Ví dụ sau là một select box đơn giản, ở đó giá trị được chọn "Volvo" được khởi tạo trong constructor:

Bằng cách thực hiện những thay đổi nhỏ này đối với <textarea> và <select>, React có thể xử lý tất cả các phần tử input theo cùng một cách.

React Lists

Trong React, chúng ta sẽ render danh sách bằng một số loại vòng lặp.

Phương thức mảng của JavaScript map() thường là phương thức được ưa thích.

Lưu ý: Nếu như bạn cần ôn lại phương thức map(), thì hãy xem phần ES6.

Chúng ta hãy render tất cả các cars từ Garage của chúng ta:

Khi chúng ta chạy đoạn code này trong create-react-app, nó sẽ làm việc nhưng chúng ta sẽ nhận được một cảnh báo rằng không có "key" được cung cấp cho các list item.

Key là cái gì ?

Key cho phép React theo dõi các phần tử. Bằng cách này, nếu như một item được cập nhật hoặc bị xóa, thì chỉ item đó sẽ được render lại thay vì toàn bộ danh sách.

Key cần phải là duy nhất đối với mỗi phần tử anh em ruột. Nhưng chúng có thể trùng nhau trên phạm vi toàn cầu.

Thông thường, key sẽ là một ID duy nhất được gán cho mỗi item. Chúng ta có thể sử dụng chỉ số của mảng như là một key.

Chúng ta hãy sửa lại ví dụ trước để bao gồm các key:

React Conditional Rendering

Trong React, chúng ta có thể render các component dựa vào điều kiện.

Có một số cách để làm việc này là sử dụng câu lệnh if, sử dụng toán tử &&, sử dụng ternary operator.

Câu lệnh if

Chúng ta có thể sử dụng câu lệnh if của JavaScript để quyết định xem component nào sẽ được render.

Trong ví dụ sau chúng ta sẽ sử dụng hai component này:

Bây giờ, chúng ta sẽ tạo ra một component khác, bên trong component này chúng ta sẽ chọn ra component nào sẽ được render dựa vào một điều kiện:

Thử thay đổi giá trị của thuộc tính isGoal thành true:

Toán tử logic &&

Một cách khác để render một React component dựa vào điều kiện là sử dụng toán tử &&.

Trong ví dụ sau chúng ta có thể nhúng các biểu thức JavaScript trong JSX bằng cách sử dụng cặp dấu ngoặc nhọn:

Nếu như biểu thức cars.length > 0 có giá trị là true, thì biểu thức sau toán tử && sẽ được render.

Thử làm rỗng mảng cars:

Ternary Operator

Một cách khác để render các phần tử dựa vào điều kiện là sử dụng ternary operator.

Chúng ta sẽ quay trở lại ví dụ goal.

Ví dụ sau sẽ trả về MadeGoal component nếu như isGoal là true, nếu không thì trả về MissedGoal component:

Để tìm hiểu thêm, chúng ta hãy xem phần ternary operator.

React Events

Giống như các sự kiện của HTML DOM, React có thể thực hiện các hành động dựa trên các sự kiện của người dùng.

React có các sự kiện giống như HTML: click, change, mouseover...

Thêm các sự kiện

Các sự kiện của React được viết bằng cú pháp camelCase, nghĩa là chúng ta sẽ viết là onClick thay cho onclick.

Trong React các hàm/phương thức xử lý sự kiện được viết ở bên trong cặp dấu ngoặc nhọn, nghĩa là chúng ta sẽ viết onClick={shoot}  thay cho onClick="shoot()".

Ví dụ sau là cách viết của React:

Ví dụ sau là cách viết của HTML:

Ví dụ sau sẽ đặt hàm shoot ở bên trong Football component:

Truyền tham số

Để truyền một tham số vào một hàm/phương thức xử lý sự kiện, chúng ta sử dụng một arrow function.

Ví dụ sau sẽ gửi "Goal!" như là một tham số đến hàm shoot, bằng cách sử dụng arrow function:

Đối tượng event của React

Trình xử lý sự kiện có quyền truy cập vào sự kiện React đã kích hoạt hàm.

Trong ví dụ sau của chúng ta sự kiện là sự kiện "click", và Arrow Function sẽ gửi đối tượng event theo cách thủ công:

Điều này sẽ có ích khi chúng ta xem phần Form trong chương sau.

React Props

Props là các đối số được truyền vào các React component.

Props được truyền vào các component thông qua các thuộc tính HTML.

props là viết tắt của properties.

Props của React

Props của React thì giống như là các đối số của hàm trong JavaScript và giống như là các thuộc tính trong HTML.

Để gửi props vào một component, chúng ta sử dụng cú pháp giống như các thuộc tính HTML:

Ví dụ sau sẽ thêm một thuộc tính "brand" vào phần tử có tên là Car:

Component nhận đối số như là một đối tượng props.

Ví dụ sau sẽ sử dụng thuộc tính brand trong component:

Truyền dữ liệu

Props cũng là cách chúng ta truyền dữ liệu từ một component đến một component khác, như là các tham số.

Ví dụ sau sẽ gửi thuộc tính "brand" từ Garage component đến Car component:

Nếu như chúng ta có một biến để gửi, và không phải là một chuỗi như trong ví dụ bên trên, thì chúng ta chỉ cần đặt tên biến vào bên trong cặp dấu ngoặc nhọn:

Ví dụ sau sẽ tạo ra một biến có tên là carName và gửi nó đến Car component:

Hoặc nếu như nó là một đối tượng thì nó  sẽ được gửi như sau:

Ví dụ sau sẽ tạo ra một đối tượng có tên là carInfo và gửi nó đến Car component:

Lưu ý: Props của React là chỉ đọc! Chúng ta sẽ gặp lỗi nếu như chúng ta cố gắng thay đổi giá trị của chúng.

React Class Components

Trước React 16.8, Các Class component là cách duy nhất để theo dõi trạng thái và vòng đời của một React component. Các Function component được coi là "không có trạng thái".

Với việc bổ sung thêm các Hook, thì các Function component bây giờ gần như tương đương với các Class component. Sự khác biệt là rất nhỏ nên có thể bạn sẽ không bao giờ cần phải sử dụng Class component trong React nữa.

Mặc dù các Function component được yêu thích hơn, nhưng hiện tại không có kế hoạch nào về việc loại bỏ các Class component khỏi React.

Phần này sẽ cho chúng ta một cái nhìn khái quát về cách sử dụng các Class component trong React.

Lưu ý: Chúng ta có thể thoải mái bỏ qua phần này, và sử dụng các Function Component để thay thế.

Các React Component

Các Component là các đoạn code ngắn độc lập và có thể tái sử dụng. Chúng có chức năng giống như là các function của JavaScript, nhưng hoạt động độc lập và trả về HTML thông qua hàm render().

Các Component được chia thành hai loại là Class component và Function component, trong chương này chúng ta sẽ tìm hiểu về Class component.

Tạo ra một Class Component

Khi tạo ra một React component, thì tên của component phải bắt đầu bằng một chữ viết hoa.

Class Component phải bao gồm câu lệnh extends React.Component, câu lệnh này sẽ tạo ra một sự thừa kế từ React.Component, và cho component của chúng ta quyền truy cập vào các function của React.Component.

Class component cũng đòi hỏi phải có phương thức render(), phương thức này sẽ trả về HTML.

Ví dụ sau sẽ tạo ra một Class component có tên là Car:

Bây giờ thì ứng dụng React của chúng ta đã có một component có tên là Car, nó sẽ trả về một phần tử <h2>.

Để sử dụng component này trong ứng dụng của mình, chúng ta sử dụng cú pháp tương tự như HTML thông thường: <Car />.

Ví dụ sau sẽ hiển thị component có tên là Car trong phần tử có id="root":

Component Constructor

Nếu như có một constructor() function trong component của chúng ta, thì function này sẽ được gọi khi component được khởi tạo.

constructor function là nơi mà chúng ta khởi tạo các thuộc tính của component.

Trong React, các thuộc tính của component sẽ được giữ trong một đối tượng được gọi là state.

Chúng ta sẽ tìm hiểu thêm về state sau trong tutorial này.

constructor function cũng là nơi mà chúng ta tôn vinh sự thừa kế của component cha bằng cách bao gồm phương thức super(), phương thức super() này sẽ thực thi constructor function của component cha, và component của chúng ta sẽ có quyền truy cập vào tất cả các function của component cha (React.Component).

Ví dụ sau sẽ tạo ra một constructor function trong component có tên là Car, và thêm một thuộc tính color:

Ví dụ sau sẽ sử dụng thuộc tính color trong phương thức render():

Props

Một cách khác để xử lý các thuộc tính của component là sử dụng props.

Props thì giống như các đối số của hàm, và chúng ta gửi chúng đến component như là các thuộc tính.

Chúng ta sẽ tìm hiểu thêm về props trong chương tiếp theo.

Ví dụ sau sẽ sử dụng một thuộc tính để truyền một màu sắc vào component có tên là Car, và sử dụng nó trong phương thức render():

Props trong Constructor

Nếu như component của chúng ta có một constructor function, thì props sẽ luôn luôn được truyền đến constructor và cũng đến React.Component thông qua phương thức super().

Ví dụ: 

Component trong Component

Chúng ta có thể tham chiếu đến các component bên trong các component khác:

Ví dụ sau sẽ sử dụng component có tên là Car ở bên trong component có tên là Garage:

Component trong tập tin

React chủ yếu nói về việc tái sử dụng lại code, và việc đưa một số component vào các tập tin riêng biệt có thể là một hành động thông minh.

Để làm điều đó, chúng ta hãy tạo ra một tập tin mới với phần mở rộng là *.js và đặt code vào bên trong nó:

Lưu ý rằng tập tin phải được bắt đầu bằng import React, và nó phải được kết thúc bằng câu lệnh export default Car;.

Sau đây là nội dung của tập tin mới, mà chúng ta đã đặt tên là Car.js:

Để có thể sử dụng component có tên là Car, chúng ta phải import tập tin tương ứng vào ứng dụng của mình.

Bây giờ chúng ta sẽ import tập tin Car.js vào ứng dụng, và chúng ta có thể sử dụng component có tên là Car như thể nó được tạo ra ở đây.

Đối tượng state của Class Component

Các Class component của React có một đối tượng dựng sẵn là state.

Chúng ta có thể nhận thấy rằng chúng ta đã sử dụng state trước đó trong phần constructor của component.

Đối tượng state là nơi mà chúng ta lưu trữ các giá trị của thuộc tính thuộc về component.

Khi đối tượng state thay đổi, thì component sẽ được render lại.

Tạo ra đối tượng state

Đối tượng state được khởi tạo trong constructor:

Ví dụ sau sẽ chỉ định đối tượng state trong phương thức constructor:

Đối tượng state có thể chứa bao nhiêu thuộc tính tùy thích:

Ví dụ sau sẽ chỉ định tất cả các thuộc tính mà component cần:

Sử dụng đối tượng state

Chúng ta có thể tham chiếu đến đối tượng state từ bất cứ nơi đâu trong component bằng cách sử dụng cú pháp this.state.propertyname:

Ví dụ sau sẽ tham chiếu đến đối tượng state trong phương thức render():

Thay đổi giá trị trong đối tượng state

Để thay đổi một giá trị trong đối tượng state, chúng ta sử dụng phương thức this.setState().

Khi một giá trị trong đối tượng state thay đổi, thì component sẽ được render lại, có nghĩa là đầu ra sẽ thay đổi theo các giá trị mới.

Ví dụ sau sẽ thêm một button với sự kiện onClick, sự kiện này sẽ thay đổi thuộc tính color:

Lưu ý: Chúng ta hãy luôn luôn sử dụng phương thức setState() để thay đổi giá trị trong đối tượng state, nó sẽ đảm bảo rằng component biết nó đã được cập nhật và gọi phương thức render() (và tất cả các phương thức vòng đời khác).

Vòng đời của các Component

Mỗi component của React đều có một vòng đời mà chúng ta có thể giám sát và điều khiển trong ba giai đoạn chính của nó.

Ba giai đoạn đó là: Thêm (Mounting), Cập nhật (Updating) và Xóa (Unmounting).

Giai đoạn thêm - Mounting

Giai đoạn thêm có nghĩa là đặt các phần tử vào trong DOM.

React có bốn phương thức dựng sẵn được gọi theo thứ tự sau, khi thêm một component vào DOM:

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

Phương thức render() là bắt buộc và sẽ luôn luôn được gọi, các phương thức khác là tùy chọn và sẽ được gọi nếu như chúng ta định nghĩa chúng.

Phương thức constructor

Phương thức constructor() được gọi trước bất kỳ phương thức nào, khi component được khởi tạo, và nó là nơi tự nhiên để thiết lập state ban đầu và các giá trị ban đầu khác.

Phương thức constructor() được gọi với props, như là các đối số, và chúng ta sẽ luôn bắt đầu bằng cách gọi super(props) trước bất cứ thứ gì khác, điều này sẽ khởi tạo phương thức constructor của component cha và cho phép component của chúng ta kế thừa các phương thức từ component cha của nó(React.Component).

Trong ví dụ sau phương thức constructor được gọi, bởi React, mỗi lần chúng ta tạo ra một component:

Phương thức getDerivedStateFromProps

Phương thức getDerivedStateFromProps() được gọi ngay trước khi render các phần tử trong DOM.

Đây là nơi tự nhiên để thiết lập đối tượng state dựa vào props ban đầu.

Nó nhận state như là một đối số, và trả về một đối tượng với sự thay đổi ở đối tượng state.

Ví dụ bên dưới bắt đầu với favorite color là "red", nhưng phương thức getDerivedStateFromProps() cập nhật favorite color dựa vào thuộc tính favcol:

Trong ví dụ sau phương thức getDerivedStateFromProps được gọi ngay trước khi phương thức render được gọi:

Phương thức render

Phương thức render() là bắt buộc, và là phương thức thực sự xuất ra HTML cho DOM.

Ví dụ sau là một component đơn giản với một phương thức render():

Phương thức componentDidMount

Phương thức componentDidMount() được gọi sau khi component được render.

Đây là nơi mà chúng ta chạy các câu lệnh bắt buộc khi component đã được đặt vào DOM.

Trong ví dụ sau lúc đầu favorite color là red, nhưng chúng ta hãy đợi một giây, favorite color sẽ được chuyển thành yellow:

Giai đoạn cập nhật - Updating

Giai đoạn tiếp theo trong vòng đời là khi một component được cập nhật.

Một component được cập nhật bất cứ khi nào có một sự thay đổi trong state hoặc props của component.

React có năm phương thức dựng sẵn được gọi theo thứ tự sau, khi một component được cập nhật:

1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

Lưu ý: Phương thức render() là bắt buộc và sẽ luôn luôn được gọi, các phương thức khác là tùy chọn và sẽ được gọi nếu như chúng ta định nghĩa chúng.

Phương thức getDerivedStateFromProps

Tại giai đoạn cập nhật phương thức getDerivedStateFromProps cũng được gọi. Đây là phương thức đầu tiên được gọi khi một component được cập nhật.

Đây vẫn là nơi tự nhiên để thiết lập đối tượng state dựa vào props ban đầu.

Ví dụ bên dưới có một button thay đổi favorite color thành blue, nhưng vì phương thức getDerivedStateFromProps() được gọi, nên nó sẽ cập nhật state với màu sắc từ thuộc tính favcol, favorite color vẫn được render là yellow:

Trong ví dụ sau nếu như component được cập nhật, thì phương thức getDerivedStateFromProps() sẽ được gọi:

Phương thức shouldComponentUpdate

Trong phương thức shouldComponentUpdate() chúng ta có thể trả về một giá trị Boolean để chỉ định xem React có nên tiếp tục được render nữa hay không.

Giá trị mặc định của nó là true.

Ví dụ bên dưới cho thấy chuyện gì sẽ xảy ra khi phương thức shouldComponentUpdate() trả về giá trị false:

Ví dụ sau sẽ ngăn cản component khỏi render tại bất kỳ giai đoạn cập nhật nào:

Ví dụ tương tự như trên, nhưng lần này phương thức shouldComponentUpdate() sẽ trả về giá trị true:

Phương thức render

Phương thức render() tất nhiên là được gọi khi một component được cập nhật, nó phải render lại HTML cho DOM, với những sự thay đổi mới.

Ví dụ bên dưới có một button thay đổi favorite color thành blue:

Hãy click vào button để tạo ra một sự thay đổi trong đối tượng state của component:

Phương thức getSnapshotBeforeUpdate

Trong phương thức getSnapshotBeforeUpdate() chúng ta có quyền truy cập vào props và state trước khi cập nhật, có nghĩa là thậm chí sau khi cập nhật, chúng ta vẫn có thể kiểm tra xem trước khi cập nhật các giá trị của chúng là gì.

Nếu như phương thức getSnapshotBeforeUpdate() có mặt, thì chúng ta cũng sẽ phải bao gồm phương thức componentDidUpdate(), nếu không thì chúng ta sẽ gặp lỗi.

Ví dụ dưới đây có vẻ phức tạp, nhưng tất cả những gì nó làm là:

Khi component đang được thêm thì nó được render với favorite color là "red".

Khi component đã được thêm, thì một timer thay đổi state, và sau một giây, favorite color trở thành "yellow".

Hành động này kích hoạt giai đoạn cập nhật, và do component này có một phương thức getSnapshotBeforeUpdate(), nên phương thức này được thực thi, và ghi ra một thông báo vào phần tử trống DIV1.

Sau đó phương thức componentDidUpdate() được thực thi và ghi ra một thông báo trong phần tử trống DIV2:

Ví dụ sau sẽ sử dụng phương thức getSnapshotBeforeUpdate() để tìm hiểu xem đối tượng state trông như thế nào trước khi cập nhật:

Phương thức componentDidUpdate

Phương thức componentDidUpdate được gọi sau khi component được cập nhật trong DOM.

Ví dụ dưới đây có vẻ phức tạp, nhưng tất cả những gì nó làm là:

Khi component đang được thêm thì nó được render với favorite color là "red".

Khi component đã được thêm, thì một timer thay đổi state, và màu sắc trở thành "yellow".

Hành động này kích hoạt giai đoạn cập nhật, và do component này có một phương thức componentDidUpdate, nên phương thức này được thực thi và ghi ra một thông điệp trong phần tử DIV trống:

Trong ví dụ sau phương thức componentDidUpdate được gọi sau khi cập nhật đã được render trong DOM:

Giai đoạn xóa - Unmounting

Giai đoạn tiếp theo trong vòng đời là khi một component bị xóa khỏi DOM.

React chỉ có một phương thức dựng sẵn duy nhất được gọi khi một component bị xóa khỏi DOM:

• componentWillUnmount()

Phương thức componentWillUnmount

Phương thức componentWillUnmount được gọi khi component sắp bị xóa khỏi DOM.

Chúng ta hãy click vào button để xóa header: