Trong React, thực sự không có nhiều cách để làm việc với Form. Nó không quá khác khi bạn tạo form với DOM APIs trong Javascript thông thường. Tôi nghĩ điều đó thật tuyệt vời.
Bạn có thể thêm event vào hàm onSubmit trên Form. Sau đó, nó sẽ liên kết với form của bạn và các element trong form để giúp bạn xử lí form hiệu quả hơn.
Bạn có một input và alert giá trị của nó khi submit form.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token keyword">function</span> <span class="token function">UsernameForm</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>onSubmitUsername<span class="token punctuation">}</span></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 operator"><</span>form<span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>label<span class="token operator">></span>Username<span class="token operator">:</span><span class="token operator"><</span><span class="token operator">/</span>label<span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>button type<span class="token operator">=</span><span class="token string">"submit"</span><span class="token operator">></span>Submit<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">App</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 function-variable function">onSubmitUsername</span> <span class="token operator">=</span> <span class="token parameter">username</span> <span class="token operator">=></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">You entered: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>username<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator"><</span>UsernameForm onSubmitUsername<span class="token operator">=</span><span class="token punctuation">{</span>onSubmitUsername<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> App |
Có một số cách để lấy giá trị của một input trong form như sau:
- Thông qua index: event.target.elements[0].value
- Thông qua name hoặc id: event.target.elements.usernameInput.value
- Một số cách khác
Đáp án:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | import * as React from 'react' function UsernameForm({onSubmitUsername}) { function handleSubmit(event) { event.preventDefault() onSubmitUsername(event.target.elements.usernameInput.value) } return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="usernameInput">Username:</label> <input id="usernameInput" type="text" /> </div> <button type="submit">Submit</button> </form> ) } function App() { const onSubmitUsername = username => alert(`You entered: ${username}`) return <UsernameForm onSubmitUsername={onSubmitUsername} /> } export default App |
Sử dụng refs
Một cách khác để lấy giá trị của input trong Form là sử dụng ref trong React. Ref là một object giữ một giá trị không đổi qua các lần re-render của component. Nó có current property để bạn lấy giá trị của ref.
Bạn hãy sử dụng ref để lấy giá trị của input trong bài tập 1 bằng ref.
Đáp án:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token keyword">function</span> <span class="token function">UsernameForm</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>onSubmitUsername<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> usernameInputRef <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">handleSubmit</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token function">onSubmitUsername</span><span class="token punctuation">(</span>usernameInputRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>form onSubmit<span class="token operator">=</span><span class="token punctuation">{</span>handleSubmit<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>label htmlFor<span class="token operator">=</span><span class="token string">"usernameInput"</span><span class="token operator">></span>Username<span class="token operator">:</span><span class="token operator"><</span><span class="token operator">/</span>label<span class="token operator">></span> <span class="token operator"><</span>input id<span class="token operator">=</span><span class="token string">"usernameInput"</span> type<span class="token operator">=</span><span class="token string">"text"</span> ref<span class="token operator">=</span><span class="token punctuation">{</span>usernameInputRef<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>button type<span class="token operator">=</span><span class="token string">"submit"</span><span class="token operator">></span>Submit<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">App</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 function-variable function">onSubmitUsername</span> <span class="token operator">=</span> <span class="token parameter">username</span> <span class="token operator">=></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">You entered: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>username<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator"><</span>UsernameForm onSubmitUsername<span class="token operator">=</span><span class="token punctuation">{</span>onSubmitUsername<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> App Validate lower<span class="token operator">-</span><span class="token keyword">case</span> cho input <span class="token constant">V</span>ới React<span class="token punctuation">,</span> bạn có thể sử dụng một hook đặc biệt gọi là useState<span class="token punctuation">.</span> <span class="token constant">V</span>í dụ đơn giản như <span class="token function-variable function">sau</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token function">Counter</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>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>increment<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token punctuation">}</span> |
React.useState nhận vào giá trị mặc định và return về một array. Sau đó, bạn có thể descontruct cái array để lấy state và hàm updater của state đó. Tham khảo: https://reactjs.org/docs/hooks-state.html
Trong bài tập này, chúng ta giả sử rằng username input chỉ chấp nhận ký tự chữ thường(lower-case). Nếu người dùng gõ vào chữ hoa, bạn phải hiện error message.
Nếu bạn muốn form được dynamic thì bạn cần phải:
- Component state phải lưu giá trị đông(dynamic value)- ở đây là error message.
- Thêm một change handler vào input để chúng ta biết được giá trị mà người dùng đã thay đổi.
Bài tập này hơi khó một tí nên bạn có thể tham khảo một số bước sau nhe:
Tạo một function handleChange nhận event là tham số và sử dụng event.target.value để lấy giá trị của input. Nhớ rằng là event này chạy khi từ input, chứ không phải form
Sử dụng giá trị của input để xét xem có lỗi hay không. Lỗi xảy ra khi người dùng nhập giá trị chữ in hoa. Bạn có thể validate như sau: const isValid = value === value.loLowerCase()
Nếu có lỗi bạn set error state là: “Username must be lower case”.
Và cuối cùng là hiển thị lỗi lên một element.
Đáp án:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token keyword">function</span> <span class="token function">UsernameForm</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>onSubmitUsername<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>error<span class="token punctuation">,</span> setError<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">handleSubmit</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token function">onSubmitUsername</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>elements<span class="token punctuation">.</span>usernameInput<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span><span class="token parameter">event</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> <span class="token operator">=</span> event<span class="token punctuation">.</span>target <span class="token keyword">const</span> isLowerCase <span class="token operator">=</span> value <span class="token operator">===</span> value<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token function">setError</span><span class="token punctuation">(</span>isLowerCase <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token operator">:</span> <span class="token string">'Username must be lower case'</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 operator"><</span>form onSubmit<span class="token operator">=</span><span class="token punctuation">{</span>handleSubmit<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>label htmlFor<span class="token operator">=</span><span class="token string">"usernameInput"</span><span class="token operator">></span>Username<span class="token operator">:</span><span class="token operator"><</span><span class="token operator">/</span>label<span class="token operator">></span> <span class="token operator"><</span>input id<span class="token operator">=</span><span class="token string">"usernameInput"</span> type<span class="token operator">=</span><span class="token string">"text"</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div role<span class="token operator">=</span><span class="token string">"alert"</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token punctuation">{</span>error<span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>button disabled<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">Boolean</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">}</span> type<span class="token operator">=</span><span class="token string">"submit"</span><span class="token operator">></span> Submit <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">App</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 function-variable function">onSubmitUsername</span> <span class="token operator">=</span> <span class="token parameter">username</span> <span class="token operator">=></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">You entered: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>username<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>minWidth<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>UsernameForm onSubmitUsername<span class="token operator">=</span><span class="token punctuation">{</span>onSubmitUsername<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> App |
Điều khiển giá trị của input
Thỉnh thoảng bạn sẽ cần control input của một trong một số trường hợp. Có thể bạn cần set giá trị của input khi người dùng click nút nào đó. Có thể bạn muốn thay đổi giá trị mà người dùng nhập vào.
Đó là lí do React hỗ trợ Controlled Form input. Hiện tại trong bài tập của chúng ta thì form là kiểu “uncontrolled” có nghĩa là trình duyệt đang giúp bạn quản lý giá trị của input và chúng ta sẽ được thông báo giá trị thay đổi thông qua những event như handleChange.
Nếu bạn cố ý muốn set lại giá trị cho input thì bạn có thể làm như sau: inputNode.value = ‘value’. Nhưng nó có vẻ hơi khó. Cho nên, React cho phép bạn set giá tri của input như sau:
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>{myInputValue}</span> <span class="token punctuation">/></span></span> |
Khi chúng ta làm điều này thì React sẽ đảm bảo rằng gia trị của input luôn là gia trị của biến myInputValue.
Bạn cần phải lưu giá trị của input username vào state(React.useState) và thêm onChange vào input để set lại giá trị cho input đó. Do ở đây, chúng ta có thể điều khiển giá trị của input nên chúng ta có thể chuyển về giá trị chữ thường bằng hàm toLowerCase() nên không bằng lưu error state nữa.
Bạn hãy thử dùng controlled form để viết lại form ở bài tập trên.
Đáp án:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token keyword">function</span> <span class="token function">UsernameForm</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>onSubmitUsername<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>username<span class="token punctuation">,</span> setUsername<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</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 keyword">function</span> <span class="token function">handleSubmit</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token function">onSubmitUsername</span><span class="token punctuation">(</span>username<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setUsername</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">toLowerCase</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 operator"><</span>form onSubmit<span class="token operator">=</span><span class="token punctuation">{</span>handleSubmit<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>label htmlFor<span class="token operator">=</span><span class="token string">"usernameInput"</span><span class="token operator">></span>Username<span class="token operator">:</span><span class="token operator"><</span><span class="token operator">/</span>label<span class="token operator">></span> <span class="token operator"><</span>input id<span class="token operator">=</span><span class="token string">"usernameInput"</span> type<span class="token operator">=</span><span class="token string">"text"</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span> value<span class="token operator">=</span><span class="token punctuation">{</span>username<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>button type<span class="token operator">=</span><span class="token string">"submit"</span><span class="token operator">></span>Submit<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">App</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 function-variable function">onSubmitUsername</span> <span class="token operator">=</span> <span class="token parameter">username</span> <span class="token operator">=></span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">You entered: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>username<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>minWidth<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>UsernameForm onSubmitUsername<span class="token operator">=</span><span class="token punctuation">{</span>onSubmitUsername<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> App |