<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/6d0ebbc5-d3e1-4127-b8a5-f26f265a41ce" alt="react18" />
B&agrave;i viết n&agrave;y&nbsp;giải th&iacute;ch refs l&agrave; g&igrave; v&agrave; c&aacute;ch thức hoạt động. Với kiến ​​thức từ b&agrave;i học trước, ch&uacute;ng ta h&atilde;y c&ugrave;ng đi s&acirc;u t&igrave;m hiểu kiến thức phức tạp hơn ch&uacute;t, c&oacute; thể &aacute;p dụng trong dự &aacute;n thực tế với nhiều component lồng nhau v&agrave; một số y&ecirc;u cầu dựa tr&ecirc;n DOM thực.
<h2 style="text-align: justify;">Forward Ref</h2>
Một giải ph&aacute;p c&oacute; vẻ ho&agrave;n hảo, phải kh&ocirc;ng? Ch&uacute;ng ta h&atilde;y thử xem một t&igrave;nh huống m&agrave; ref kh&ocirc;ng thể ho&agrave;n th&agrave;nh c&ocirc;ng việc. Điều g&igrave; sẽ xảy ra nếu ch&uacute;ng ta c&oacute; một component cha cần tham chiếu đến một trong c&aacute;c phần tử được x&aacute;c định trong component con v&agrave; sửa đổi trạng th&aacute;i focus? H&atilde;y xem v&iacute; dụ sau.
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/79d5990a-34bf-4212-bb62-71b54dcbd0c5" alt="photo_2023-02-02_13-31-24" />
Component cha kiểm so&aacute;t focus của n&uacute;t được x&aacute;c định trong component con
Như bạn c&oacute; thể thấy, component cha kiểm so&aacute;t focus tr&ecirc;n n&uacute;t của component con. N&oacute; kh&ocirc;ng đơn giản như việc truyền ref được x&aacute;c định trong component cha như một prop cho component con. Trong trường hợp n&agrave;y, ref l&agrave; một thuộc t&iacute;nh đặc biệt được x&aacute;c định tr&ecirc;n phần tử HTML ch&iacute;nh x&aacute;c c&oacute; focus được thay đổi, kh&ocirc;ng phải tr&igrave;nh đ&oacute;ng g&oacute;i component con, v&igrave; n&oacute; chỉ l&agrave; một h&agrave;m.
Ch&uacute;ng ta c&oacute; thể đạt được h&agrave;nh vi mong muốn bằng c&aacute;ch g&oacute;i component con v&agrave;o h&agrave;m <code>forwardRef</code> do React cung cấp, h&agrave;m n&agrave;y sẽ xử l&yacute; việc ủy ​​quyền. H&agrave;m sẽ truyền props đ&atilde; gửi v&agrave; cho ph&eacute;p th&ecirc;m một prop tr&ecirc;n component, đ&oacute; l&agrave; &ldquo;ref&rdquo;. Code như sau:
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/edf1efe7-649e-4d01-a9bd-0d94fb9ee905" alt="photo_2023-02-02_13-31-13" />
L&agrave;m thế n&agrave;o để sử dụng forwardRef trong React?
<h2 style="text-align: justify;">useImperativeHandle</h2>
Đ&ocirc;i khi bạn muốn x&aacute;c định một chức năng ref t&ugrave;y chỉnh b&ecirc;n trong component, chức năng n&agrave;y sẽ được hiển thị cho c&aacute;c component sử dụng n&oacute;. H&atilde;y thử h&igrave;nh dung một t&igrave;nh huống m&agrave; ch&uacute;ng ta cần sự kiểm so&aacute;t chi tiết như vậy.
Theo mặc định, m&agrave;u ti&ecirc;u điểm của đầu v&agrave;o l&agrave; <code>blue</code> nhưng giả sử nếu ninja phải nhận một nhiệm vụ jonin si&ecirc;u cấp th&igrave; trường đầu v&agrave;o l&agrave; <code>red</code>.
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/be598842-c930-4262-a471-7f9906022f88" alt="photo_2023-02-02_13-31-31" />
Component cha c&oacute; thể kiểm so&aacute;t m&agrave;u sắc m&agrave; đầu v&agrave;o của component con phải tập trung v&agrave;o
Để minh họa việc sử dụng <code>useImperativeHandle</code> trong trường hợp n&agrave;y, h&atilde;y tạo hai phương thức t&ugrave;y chỉnh gắn với component đầu v&agrave;o th&ocirc;ng qua ref. Thay v&igrave; sử dụng phương thức focus mặc định, lần n&agrave;y, ch&uacute;ng ta sẽ d&ugrave;ng hai phương thức t&ugrave;y chỉnh l&agrave; <code>focusRed()</code> v&agrave; <code>focusBlue()</code>.
Ch&uacute;ng ta vẫn cần sử dụng <code>forwardRef</code> để truyền ref cho component con, nhưng b&ecirc;n trong component con, ta sẽ tạo 2 h&agrave;m mới n&agrave;y bằng hook <code>useImperativeHandle</code>. Code như sau:
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/6b65a6c1-d61b-44cc-851e-fbd206dfe70c" alt="photo_2023-02-02_13-31-43" />
Th&ecirc;m phương thức t&ugrave;y chỉnh v&agrave;o ref sử dụng useImperativeHandle
Một điều quan trọng cần lưu &yacute; l&agrave; trong đoạn code tr&ecirc;n, ch&uacute;ng ta kh&ocirc;ng mở rộng những phương thức c&oacute; sẵn theo mặc định như trong trường hợp trước m&agrave; tạo một tập hợp c&aacute;c phương thức ho&agrave;n to&agrave;n mới. V&igrave; vậy, phương thức <code>default focus()</code> kh&ocirc;ng c&ograve;n khả dụng nữa v&agrave; việc gọi phương thức n&agrave;y sẽ dẫn đến lỗi.
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/9c2dac16-4c36-46b3-bbf0-4ff946deb548" alt="photo_2023-02-02_13-31-50" />
Phương thức focus kh&ocirc;ng khả dụng khi sử dụng imperative handle
Kết luận
T&oacute;m lại: Kh&ocirc;ng n&ecirc;n sử dụng ch&iacute;nh ref sang DOM khi lập tr&igrave;nh dựa tr&ecirc;n DOM ảo v&igrave; những thay đổi thực hiện trong DOM thực kh&ocirc;ng được phản &aacute;nh đến vDOM v&agrave; điều đ&oacute; dẫn đến h&agrave;nh v&igrave; kh&ocirc;ng mong muốn. <code>focus</code> l&agrave; chủ đề ch&iacute;nh cho b&agrave;i viết n&agrave;y v&igrave; đ&acirc;y l&agrave; một trong những trường hợp sử dụng phổ biến của ref.

Bich Huong

Khi nào sử dụng “useImperativeHandle” và “forwardRefs” trong React 18

Cùng tác giả

Bich Huong

Có liên quan