Nếu bạn đang x&acirc;y dựng biểu mẫu bằng React v&agrave; Typescript, c&oacute; lẽ bạn sẽ ưu ti&ecirc;n d&ugrave;ng phần tử HTML cơ bản thay v&igrave; thư viện. Nếu chọn sử dụng phần tử cơ bản như <code>form</code> v&agrave; <code>input</code>, bạn n&ecirc;n sử dụng c&aacute;c kiểu dữ liệu ph&ugrave; hợp khi phản hồi với sự kiện của ch&uacute;ng. Nếu chỉ d&ugrave;ng kiểu <code>any</code> th&ocirc;i th&igrave; kh&aacute; đơn giản, sau c&ugrave;ng th&igrave; <code>form</code> v&agrave; <code>input</code> l&agrave; những nội dung đầu ti&ecirc;n được mọi người tiếp cận trong thiết kế web. Tuy nhi&ecirc;n, lời khuy&ecirc;n l&agrave; n&ecirc;n hạn chế sử dụng kiểu dữ liệu <code>any</code> hết mức c&oacute; thể.
Dưới đ&acirc;y l&agrave; một số phương ph&aacute;p thay thế gi&uacute;p bạn hạn chế việc sử dụng any.
<h2 style="text-align: justify;">Biểu mẫu cơ bản</h2>
<pre class="language-python"><code>const App: React.FunctionComponent = () =&gt; {
 const [name, setName] = React.useState("")
 const [option, setOption] = React.useState("")
 const onChangeInput = (event: any) =&gt; {
 setName(event.target.value)
 }
 const onChangeSelect = (event: any) =&gt; {
 setOption(event.target.value)
 }
 const onSubmit = (event: any) =&gt; {
 event.preventDefault()
 console.log("Submitted")
 }
 return (
 &lt;div&gt;
 &lt;form onSubmit={onSubmit}&gt;
 &lt;label for="name"&gt;Name&lt;/label&gt;
 &lt;input type="text" id="name" name="name" onChange={onChange}/&gt;
 &lt;select onChange={onChangeSelect} value={option} id="options" name="options"&gt;
 &lt;option value="option1"&gt;Option 1&lt;/option&gt;
 &lt;option value="option2"&gt;Option 2&lt;/option&gt;
 &lt;option value="option3"&gt;Option 3&lt;/option&gt;
 &lt;option value="option4"&gt;Option4&lt;/option&gt;
 &lt;/select&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 )
}</code></pre>
Đ&acirc;y l&agrave; một biểu mẫu cơ bản với 2 h&agrave;m: 1 h&agrave;m cho sự kiện <code>onSubmit</code> biểu mẫu v&agrave; 1 h&agrave;m cho sự kiện <code>OnChange</code> đầu v&agrave;o.
<h2 style="text-align: justify;">Đầu v&agrave;o OnChange</h2>
Lấy gi&aacute; trị từ sự kiện <code>onChange</code> đầu v&agrave;o l&agrave; một trong những thao t&aacute;c cơ bản với HTML. Trong TypeScript, bạn c&oacute; thể v&ocirc; t&igrave;nh c&oacute; th&oacute;i quen d&ugrave;ng kiểu <code>any</code> cho sự kiện <code>onChange</code>. Thay v&igrave; d&ugrave;ng <code>any</code>, bạn c&oacute; thể sử dụng <code>React.ChangeEvent&lt;HTMLInputElement&gt;</code>:
<code>const onChange = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt;</code>
Code sẽ cho bạn truy cập v&agrave;o tất cả gi&aacute; trị c&oacute; trong sự kiện onChange đầu v&agrave;o.
Nếu đang thao t&aacute;c tr&ecirc;n một v&ugrave;ng văn bản v&agrave; cần ph&acirc;n biệt sự kiện, bạn c&oacute; thể nhập:
<code>const onChange = (event: React.ChangeEvent&lt;HTMLTextAreaElement&gt;) =&gt;</code>
<h2 style="text-align: justify;">C&aacute;c t&ugrave;y chọn Select</h2>
T&ugrave;y chọn Select giống với đầu v&agrave;o văn bản. Nếu bạn cần thực thi một số logic t&ugrave;y chỉnh với thẻ select, h&atilde;y d&ugrave;ng <code>React.ChangeEvent&lt;HTMLSelectElement&gt;</code>.
<code>const onChange = (event: React.ChangeEvent&lt;HTMLSelectElement&gt;) =&gt;</code>
<h2 style="text-align: justify;">Nộp Biểu mẫu</h2>
Giống như <code>onChange</code>, ch&uacute;ng ta đều biết rằng để ngăn kh&ocirc;ng cho biểu mẫu thực hiện h&agrave;nh vi submit mặc định, ta cần thực hiện lệnh gọi đến <code>event.preventDefault()</code>. Thay v&igrave; d&ugrave;ng <code>any</code>, ta sẽ d&ugrave;ng <code>React.FormEvent&lt;HTMLFormElement&gt;</code>.
<code>const onSubmit = (event: React.FormEvent&lt;HTMLFormElement&gt;) =&gt;</code>
<h2 style="text-align: justify;">Tổng quan</h2>
<pre class="language-python"><code>const App: React.FunctionComponent = () =&gt; {
 const [name, setName] = React.useState("")
 const [option, setOption] = React.useState("")
 const onChangeInput = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
 setName(event.target.value)
 }
 const onChangeSelect = (event: React.ChangeEvent&lt;HTMLSelectElement&gt;) =&gt; {
 setOption(event.target.value)
 }
 const onSubmit = (event: React.FormEvent&lt;HTMLFormElement&gt;) =&gt; {
 event.preventDefault()
 console.log("Submitted")
 }
 return (
 &lt;div&gt;
 &lt;form onSubmit={onSubmit}&gt;
 &lt;label for="name"&gt;Name&lt;/label&gt;
 &lt;input type="text" id="name" name="name" onChange={onChangeInput}/&gt;
 &lt;select onChange={onChangeSelect} value={option} id="options" name="options"&gt;
 &lt;option value="option1"&gt;Option 1&lt;/option&gt;
 &lt;option value="option2"&gt;Option 2&lt;/option&gt;
 &lt;option value="option3"&gt;Option 3&lt;/option&gt;
 &lt;option value="option4"&gt;Option4&lt;/option&gt;
 &lt;/select&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 )
}</code></pre>
&nbsp;
Kết luận
Qua b&agrave;i viết n&agrave;y, h&atilde;y cố gắng hạn chế sử dụng kiểu dữ liệu <code>any</code> cho thuộc t&iacute;nh h&agrave;m v&agrave; sử dụng những biện ph&aacute;p thay thế được đề cập trong b&agrave;i viết.
Hi vọng nhứng kiến thức n&agrave;y c&oacute; &iacute;ch cho bạn.
Ch&uacute;c bạn th&agrave;nh c&ocirc;ng!
<h1 class="ant-typography content_title__1vTxT">---</h1>

Admin

React và TypeScript: Các loại sự kiện biểu mẫu cơ bản

Cùng tác giả

Admin

Có liên quan