7 React Hooks mà bạn cần biết

Thứ Tư, 01/02/2023

Tram Ho

React Hook là các tính năng đặc biệt giúp sử dụng lại mã dễ dàng hơn trong các dự án React của bạn. Có bảy React Hook quan trọng mà bạn có thể sử dụng trong mọi dự án. Những Móc này đến từ thư viện có tên @mantine/hooks , có rất nhiều tính năng hữu ích cho ứng dụng React của bạn.

Việc `useIntersection`

Khi bạn sử dụng một ứng dụng, đôi khi bạn cuộn trang xuống. Ứng dụng có thể muốn biết khi nào bạn có thể xem một số nội dung nhất định trên trang. Ví dụ: ứng dụng có thể muốn bắt đầu hoạt ảnh khi bạn có thể nhìn thấy một thứ nhất định. Hoặc, ứng dụng có thể muốn hiển thị hoặc ẩn nội dung nào đó sau khi bạn đã cuộn trang xuống một khoảng nhất định.

Chúng ta có thể sử dụng API Trình quan sát Giao lộ để tìm hiểu xem có thứ gì đó hiển thị trên màn hình hay không. Đó là một loại JavaScript đặc biệt được tích hợp trong trình duyệt web. Chúng ta có thể tự sử dụng nó hoặc sử dụng hook useIntersection để lấy thông tin về việc liệu một phần tử nhất định có nằm trong khu vực mà chúng ta có thể nhìn thấy khi cuộn hay không.

<span class="token keyword">import</span> <span class="token punctuation">{</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> useIntersection <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mantine/hooks'</span> <span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">Demo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> containerRef <span class="token operator">=</span> <span class="token function">useRef</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> ref <span class="token punctuation">,</span> entry <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useIntersection</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    root <span class="token operator">:</span> containerRef <span class="token punctuation">.</span> current <span class="token punctuation">,</span>
    threshold <span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> main</span> <span class="token attr-name">ref</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> containerRef <span class="token punctuation">}</span></span> <span class="token attr-name">style</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> overflowY <span class="token operator">:</span> <span class="token string">'scroll'</span> <span class="token punctuation">,</span> height <span class="token operator">:</span> <span class="token number">300</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">ref</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> span</span> <span class="token punctuation">&gt;</span></span>
          <span class="token punctuation">{</span> entry <span class="token operator">?.</span> isIntersecting <span class="token operator">?</span> <span class="token string">'Fully visible'</span> <span class="token operator">:</span> <span class="token string">'Obscured'</span> <span class="token punctuation">}</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> span</span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> main</span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import { useRef } from 'react' ;

import { useIntersection } from '@mantine/hooks' ;

function Demo ( ) {

const containerRef = useRef ( ) ;

const { ref , entry } = useIntersection ( {

root : containerRef . current ,

threshold : 1 ,

} ) ;

return (

< main ref = { containerRef } style = { { overflowY : 'scroll' , height : 300 } } >

< span >

{ entry ?. isIntersecting ? 'Fully visible' : 'Obscured' }

</ span >

</ div >

</ main >

) ;

}

Chúng ta có thể sử dụng một hook đặc biệt để theo dõi thời điểm một phần tử có hiển thị hay không trong vùng chứa cuộn. Chúng ta cần cung cấp cho hook một tham chiếu đến vùng chứa cuộn và phần tử mà chúng ta muốn theo dõi. Sau đó, nó sẽ cho chúng ta biết khi phần tử có hiển thị hay không. Chúng ta cũng có thể điều chỉnh mức độ hiển thị của phần tử để nó được tính là hiển thị.

Sử `useScrollLock` Hook

Cái móc này giúp bạn khi bạn muốn hiển thị thứ gì đó trên màn hình mà bạn không muốn mọi người cuộn đi. Nó ngăn mọi người cuộn lên và cuộn xuống trên trang để tất cả sự chú ý đều tập trung vào thứ bạn muốn họ xem. Nó cũng cho phép bạn có một khu vực đặc biệt mà bạn có thể cuộn vào, vì vậy bạn vẫn có thể di chuyển quanh trang.

<span class="token keyword">import</span> <span class="token punctuation">{</span> useScrollLock <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mantine/hooks'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">,</span> Group <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mantine/core'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> IconLock <span class="token punctuation">,</span> IconLockOpen <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@tabler/icons'</span> <span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">Demo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span> scrollLocked <span class="token punctuation">,</span> setScrollLocked <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useScrollLock</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">Group</span></span> <span class="token attr-name">position</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> center <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">Button</span></span>
        <span class="token attr-name">onClick</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setScrollLocked</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">c</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">!</span> c <span class="token punctuation">)</span> <span class="token punctuation">}</span></span>
        <span class="token attr-name">variant</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> outline <span class="token punctuation">"</span></span>
        <span class="token attr-name">leftIcon</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> scrollLocked <span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">IconLock</span></span> <span class="token attr-name">size</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token number">16</span> <span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span> <span class="token operator">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">IconLockOpen</span></span> <span class="token attr-name">size</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token number">16</span> <span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span> <span class="token punctuation">}</span></span>
      <span class="token punctuation">&gt;</span></span>
        <span class="token punctuation">{</span> scrollLocked <span class="token operator">?</span> <span class="token string">'Unlock scroll'</span> <span class="token operator">:</span> <span class="token string">'Lock scroll'</span> <span class="token punctuation">}</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">Button</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">Group</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import { useScrollLock } from '@mantine/hooks' ;

import { Button , Group } from '@mantine/core' ;

import { IconLock , IconLockOpen } from '@tabler/icons' ;

const [ scrollLocked , setScrollLocked ] = useScrollLock ( ) ;

return (

< Group position = " center " >

< Button

onClick = { ( ) => setScrollLocked ( ( c ) => ! c ) }

variant = " outline "

leftIcon = { scrollLocked ? < IconLock size = { 16 } /> : < IconLockOpen size = { 16 } /> }

>

{ scrollLocked ? 'Unlock scroll' : 'Lock scroll' }

</ Button >

</ Group >

) ;

}

useScrollLock là một cách để giữ vị trí của bạn trên một trang. Nó sẽ cho bạn biết cuộn có bị khóa hay không và bạn có thể sử dụng nó để hiển thị nội dung khác khi cuộn bị khóa. Ví dụ: bạn có thể sử dụng nó để hiển thị thông báo rằng cuộn bị khóa.

Việc `useClipboard` Hook

Bạn có thể giúp mọi người sao chép nội dung nào đó từ trang web của mình dễ dàng hơn bằng cách sử dụng API Clipboard. useClipboard cung cấp cho bạn chức năng sao chép mà bạn có thể sử dụng để sao chép đoạn mã hoặc văn bản khác. Bằng cách này, mọi người có thể dễ dàng sao chép văn bản và dán vào bất cứ đâu họ muốn.

Khi bạn nhấn nút sao chép, chúng tôi sẽ tạo một bản sao của đoạn mã và hiển thị cho bạn một dấu kiểm để cho bạn biết đoạn mã đó đã được sao chép. Nút sao chép cũng có bộ hẹn giờ sẽ đặt lại sau một khoảng thời gian nhất định để bạn có thể sao chép lại văn bản.

Móc `useDebouncedValue`

Nếu bạn có hộp tìm kiếm trong ứng dụng của mình, thì useDebouncedValue là một công cụ hữu ích. Nó ngăn ứng dụng của bạn gửi quá nhiều yêu cầu khi ai đó đang nhập vào hộp tìm kiếm. Thay vào đó, nó đợi cho đến khi người đó nhập xong trước khi gửi yêu cầu. Điều này giúp đảm bảo rằng ứng dụng của bạn không gửi quá nhiều yêu cầu và đảm bảo kết quả tìm kiếm chính xác hơn.

<span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> useDebouncedValue <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mantine/hooks'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getResults <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'api'</span> <span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">Demo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span> value <span class="token punctuation">,</span> setValue <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token string">''</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span> results <span class="token punctuation">,</span> setResults <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span> debounced <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useDebouncedValue</span> <span class="token punctuation">(</span> value <span class="token punctuation">,</span> <span class="token number">200</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// wait time of 200 ms</span>
    
  <span class="token function">useEffect</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span> debounced <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">handleGetResults</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> 
    <span class="token punctuation">}</span>
     
    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">handleGetResults</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token keyword">const</span> results <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getResults</span> <span class="token punctuation">(</span> debounced <span class="token punctuation">)</span>   
       <span class="token function">setResults</span> <span class="token punctuation">(</span> results <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> debounced <span class="token punctuation">]</span> <span class="token punctuation">)</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> input</span>
        <span class="token attr-name">label</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> Enter search query <span class="token punctuation">"</span></span>
        <span class="token attr-name">value</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> value <span class="token punctuation">}</span></span>
        <span class="token attr-name">style</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> flex <span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span></span>
        <span class="token attr-name">onChange</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token parameter">event</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setValue</span> <span class="token punctuation">(</span> event <span class="token punctuation">.</span> currentTarget <span class="token punctuation">.</span> value <span class="token punctuation">)</span> <span class="token punctuation">}</span></span>
      <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> ul</span> <span class="token punctuation">&gt;</span></span> <span class="token punctuation">{</span> results <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token parameter">result</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> li</span> <span class="token punctuation">&gt;</span></span> <span class="token punctuation">{</span> result <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> li</span> <span class="token punctuation">&gt;</span></span> <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> ul</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import { useState } from 'react' ;

import { useDebouncedValue } from '@mantine/hooks' ;

import { getResults } from 'api' ;

const [ value , setValue ] = useState ( '' ) ;

const [ results , setResults ] = useState ( [ ] )

const [ debounced ] = useDebouncedValue ( value , 200 ) ; // wait time of 200 ms

useEffect ( ( ) => {

if ( debounced ) {

handleGetResults ( )

}

async function handleGetResults ( ) {

const results = await getResults ( debounced )

setResults ( results )

}

} , [ debounced ] )

return (

< >

< input

label = " Enter search query "

value = { value }

style = { { flex : 1 } }

onChange = { ( event ) => setValue ( event . currentTarget . value ) }

/>

< ul > { results . map ( result => < li > { result } </ li > } </ ul >

</ >

) ;

}

Bạn có thể lưu các từ bạn nhập vào một vị trí đặc biệt gọi là trạng thái. Bạn cũng có thể yêu cầu địa điểm đặc biệt đợi một khoảng thời gian nhất định trước khi nó gửi các từ bạn đã nhập. Bằng cách này, bạn không phải gửi những từ bạn đã nhập quá thường xuyên. Bạn có thể thấy điều này trong video trong đó các từ bạn nhập không xuất hiện cho đến sau 200 mili giây.

Móc `useMediaQuery`

useMediaQuery hook giúp chúng ta thay đổi giao diện của một thứ gì đó tùy thuộc vào kích thước của màn hình. Ví dụ: nếu màn hình rộng 900 pixel, chúng ta có thể sử dụng hook để làm cho một cái gì đó trông khác đi. Cái móc sẽ cho chúng tôi biết nếu kích thước màn hình phù hợp với những gì chúng tôi yêu cầu và sau đó chúng tôi có thể thay đổi giao diện của thứ gì đó.

<span class="token keyword">import</span> <span class="token punctuation">{</span> useMediaQuery <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mantine/hooks'</span> <span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">Demo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> matches <span class="token operator">=</span> <span class="token function">useMediaQuery</span> <span class="token punctuation">(</span> <span class="token string">'(min-width: 900px)'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">style</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> color <span class="token operator">:</span> matches <span class="token operator">?</span> <span class="token string">'teal'</span> <span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token punctuation">{</span> matches <span class="token operator">?</span> <span class="token string">'I am teal'</span> <span class="token operator">:</span> <span class="token string">'I am red'</span> <span class="token punctuation">}</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import { useMediaQuery } from '@mantine/hooks' ;

const matches = useMediaQuery ( '(min-width: 900px)' ) ;

return (

< div style = { { color : matches ? 'teal' : 'red' } } >

{ matches ? 'I am teal' : 'I am red' }

</ div >

) ;

}

Điều này có nghĩa là chúng ta có thể sử dụng JavaScript để thay đổi giao diện của một thứ gì đó, chẳng hạn như màu sắc hoặc kích thước. Chúng ta có thể làm điều này bằng cách sử dụng thuộc tính style .

Trong một số trường hợp, khi bạn không thể sử dụng CSS để làm cho thứ gì đó trông khác đi trên các thiết bị khác nhau, điều này có thể hữu ích.

Sử `useClickOutside` Hook

Cái móc này giúp chúng tôi đảm bảo rằng khi ai đó nhấp vào bên ngoài một thành phần nhất định, chẳng hạn như cửa sổ bật lên, thì nó sẽ đóng lại. Nó giống như một cách để đảm bảo rằng khi ai đó nhấp vào bên ngoài cửa sổ bật lên, nó sẽ tự động đóng lại.

<span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> useClickOutside <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mantine/hooks'</span> <span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">Demo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span> opened <span class="token punctuation">,</span> setOpened <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">const</span> ref <span class="token operator">=</span> <span class="token function">useClickOutside</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setOpened</span> <span class="token punctuation">(</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> button</span> <span class="token attr-name">onClick</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setOpened</span> <span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Open dropdown</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> button</span> <span class="token punctuation">&gt;</span></span>
      <span class="token punctuation">{</span> opened <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">ref</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token attr-name">shadow</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> sm <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> span</span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Click outside to close</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> span</span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
      <span class="token punctuation">)</span> <span class="token punctuation">}</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import { useClickOutside } from '@mantine/hooks' ;

const [ opened , setOpened ] = useState ( false ) ;

const ref = useClickOutside ( ( ) => setOpened ( false ) ) ;

return (

< >

< button onClick = { ( ) => setOpened ( true ) } > Open dropdown </ button >

{ opened && (

< div ref = { ref } shadow = " sm " >

< span > Click outside to close </ span >

</ div >

) }

</ >

) ;

}

Khi bạn bấm vào bên ngoài một phần tử nhất định, useClickOutside sẽ chạy một chức năng đặc biệt để báo cho máy tính biết phải làm gì. Thông thường, chức năng này sẽ làm cho phần tử đóng lại. Để thực hiện việc này, bạn cần cung cấp cho máy tính một lệnh (chẳng hạn như setOpened) để yêu cầu máy tính đóng phần tử.

`useForm`

Móc yêu thích của tôi giúp tôi tạo biểu mẫu trong React. Nó được gọi là useForm và nó đến từ Mantine. Tôi cần cài đặt một gói từ thư viện có tên @mantine /form để sử dụng nó. Nó giúp tôi đảm bảo thông tin tôi điền vào biểu mẫu là chính xác trước khi gửi. Nó cũng giúp tôi xác thực đầu vào và hiển thị thông báo lỗi. Tôi có thể cung cấp cho nó một số giá trị ban đầu để khớp với đầu vào trong biểu mẫu của tôi.

<span class="token keyword">import</span> <span class="token punctuation">{</span> TextInput <span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mantine/core'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> useForm <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mantine/form'</span> <span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">Demo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> form <span class="token operator">=</span> <span class="token function">useForm</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    initialValues <span class="token operator">:</span> <span class="token punctuation">{</span>
      email <span class="token operator">:</span> <span class="token string">''</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    validate <span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token function-variable function">email</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token parameter">value</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span> <span class="token regex"><span class="token regex-delimiter">/</span> <span class="token regex-source language-regex">^S+@S+$</span> <span class="token regex-delimiter">/</span></span> <span class="token punctuation">.</span> <span class="token function">test</span> <span class="token punctuation">(</span> value <span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token operator">:</span> <span class="token string">'Invalid email'</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> form</span> <span class="token attr-name">onSubmit</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> form <span class="token punctuation">.</span> <span class="token function">onSubmit</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">values</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> values <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span></span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">TextInput</span></span>
          <span class="token attr-name">withAsterisk</span>
          <span class="token attr-name">label</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> Email <span class="token punctuation">"</span></span>
          <span class="token attr-name">placeholder</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> your@email.com <span class="token punctuation">"</span></span>
          <span class="token spread"><span class="token punctuation">{</span> <span class="token operator">...</span> form <span class="token punctuation">.</span> <span class="token function">getInputProps</span> <span class="token punctuation">(</span> <span class="token string">'email'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span></span>
        <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">Button</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> submit <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Submit</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">Button</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> form</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import { TextInput , Button } from '@mantine/core' ;

import { useForm } from '@mantine/form' ;

const form = useForm ( {

initialValues : {

email : ''

} ,

validate : {

email : ( value ) => ( / ^S+@S+$ / . test ( value ) ? null : 'Invalid email' ) ,

} ,

} ) ;

return (

< div >

< form onSubmit = { form . onSubmit ( ( values ) => console . log ( values ) ) } >

< TextInput

withAsterisk

label = " Email "

placeholder = " your@email.com "

{ ... form . getInputProps ( 'email' ) }

/>

< Button type = " submit " > Submit </ Button >

</ form >

</ div >

) ;

}

useForm có một tính năng đặc biệt được gọi là chức năng xác thực. Nó xem những gì bạn nhập vào từng ô trên biểu mẫu và kiểm tra xem nó có đúng không. Ví dụ: nếu bạn nhập địa chỉ email, chức năng xác thực sẽ đảm bảo đó là địa chỉ email thực. Nếu không, nó sẽ hiển thị thông báo lỗi và không cho phép bạn gửi biểu mẫu.

Nếu bạn đang điền vào một biểu mẫu, thì useForm là một công cụ có thể giúp bạn theo dõi các giá trị bạn nhập vào và đảm bảo rằng biểu mẫu được điền chính xác. Nó cũng sẽ giúp bạn ngăn việc gửi biểu mẫu nếu nó không đáp ứng các quy tắc. Nó giúp việc điền vào các biểu mẫu dễ dàng hơn và đảm bảo mọi thứ được thực hiện chính xác.

Và cuối cùng

Như mọi khi, tôi hy vọng bạn thích bài viết này và học được điều gì đó mới. Xin cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo!

Nếu các bạn thích bài viết này thì hãy cho mình 1 like và subscribe để ủng hộ mình nhé. Cảm ơn bạn.

Giới thiệu

https://tuan200tokyo.blogspot.com/2023/01/blog120-7-react-hooks-you-need-to-know.html

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

7 React Hooks mà bạn cần biết

Việc `useIntersection`

Sử `useScrollLock` Hook

Việc `useClipboard` Hook

Móc `useDebouncedValue`

Móc `useMediaQuery`

Sử `useClickOutside` Hook

`useForm`

Và cuối cùng

Giới thiệu

Có nguy cơ 1,76 triệu thuê bao bị khóa dịch vụ 1 chiều từ 0h đêm nay

Jack Ma vẫn có quyền lực không tưởng: Trực tiếp ‘đạo diễn’ vụ chia tách thành 6 của Alibaba, quyết định lãnh đạo nào ‘đi hay ở’ dù đã nghỉ hưu 4 năm

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

Việc useIntersection

Sử useScrollLock Hook

Việc useClipboard Hook

Móc useDebouncedValue

Móc useMediaQuery

Sử useClickOutside Hook

useForm

Và cuối cùng

Giới thiệu

Có nguy cơ 1,76 triệu thuê bao bị khóa dịch vụ 1 chiều từ 0h đêm nay

Jack Ma vẫn có quyền lực không tưởng: Trực tiếp ‘đạo diễn’ vụ chia tách thành 6 của Alibaba, quyết định lãnh đạo nào ‘đi hay ở’ dù đã nghỉ hưu 4 năm

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

Việc `useIntersection`

Sử `useScrollLock` Hook

Việc `useClipboard` Hook

Móc `useDebouncedValue`

Móc `useMediaQuery`

Sử `useClickOutside` Hook

`useForm`