Mẫu vật liệu UI + ReactJS + TypeScript (phần 1)

Thứ Ba, 05/05/2020

Tram Ho

Như tiêu đề bài viết, nội dung trong bài viết này của mình sẽ tạo một form basic sử dụng Material UI, ReactJS và Typescript. Vậy điều đầu tiên tại sao chúng ta lại cần typescript? Typescript hoạt động ra sao?

Lý do đơn giản để sử dụng typescript đó là nếu bạn muốn code chặt chẽ hơn giữa các data type, có một sự đồng bộ giữa các member trong project thì hãy lên sử dụng typescript.
Thực chất bạn không phải là học thêm một ngôn ngữ lập trình mới mà typescript sẽ được transform qua javascript thông qua Babel và code của chúng ta vẫn là javascript như trước kia.

Yêu cầu:

tạo form cho 2 loại input text và checkbox + submit button
dữ liệu khi submit form có dạng (chỉ cần console.log trong hàm thực thi): {categories: [1, 2, 3, 4], meta: ["a", "b", "c"]}
meta ko được chứa dữ liệu rỗng
cho phép add or remove input text
multi checkbox

2. Demo

Trước khi demo thì chúng ta cũng cần có các kiến thức cơ bản:

Basic types, các bạn chỉ cần dành thêm 5 phút để đọc chúng.
ReactJS Form basic
Material UI basic
React Hooks basic

Và cài các dependency như sau:

typescript
types/react
types/react-dom
material-ui/core
material-ui/lab

Start nào!!!

Đối với file index.js đơn giản chúng ta chỉ cần inport component Form mà chúng ta sẽ custom ngay bây giờ:

<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ThemeProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@material-ui/core/styles'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> theme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./theme'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Form <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./form'</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>ThemeProvider theme<span class="token operator">=</span><span class="token punctuation">{</span>theme<span class="token punctuation">}</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Form <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>ThemeProvider<span class="token operator">&gt;</span><span class="token punctuation">,</span>
  document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#root'</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

import React from 'react';

import ReactDOM from 'react-dom';

import { ThemeProvider } from '@material-ui/core/styles';

import { theme } from './theme';

import { Form } from './form';

ReactDOM.render(

</ThemeProvider>,

document.querySelector('#root')

);

<span class="token keyword">import</span> React<span class="token punctuation">,</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> Grid <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@material-ui/core"</span><span class="token punctuation">;</span>

<span class="token operator">...</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">Form</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">&lt;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>Grid container direction<span class="token operator">=</span><span class="token string">"column"</span><span class="token operator">&gt;</span>
        Hello<span class="token operator">!</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>Grid<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import React, { useState } from "react";

import { Grid } from "@material-ui/core";

...

export function Form() {

return (

<>

Hello!

</Grid>

</>

);

}

Oke, giờ ta làm trước phần multi checkbox xem sao nhé, thay vì fix cứng data checkbox mình sẽ giả dụ như chúng ta đang có 1 cục data được server trả về như sau:

<span class="token keyword">import</span> <span class="token punctuation">{</span> FormComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./components/Form"</span><span class="token punctuation">;</span>

<span class="token operator">...</span>

<span class="token keyword">const</span> categories <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">"ryzen 3"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">"ryzen 5"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">"ryzen 7"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">"ryzen 9"</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">Form</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">&lt;</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>Grid container direction<span class="token operator">=</span><span class="token string">"column"</span><span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>FormComponent
              categories<span class="token operator">=</span><span class="token punctuation">{</span>categories<span class="token punctuation">}</span>
            <span class="token operator">/</span><span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>Grid<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

import { FormComponent } from "./components/Form";

...

const categories = [

{ id: 1, name: "ryzen 3" },

{ id: 2, name: "ryzen 5" },

{ id: 3, name: "ryzen 7" },

{ id: 4, name: "ryzen 9" }

];

return (

<>

<FormComponent

categories={categories}

/>

</Grid>

</>

);

};

Ở trên mình có pass categories qua một component khác mục đích đó là chúng ta sẽ xử lý tất cả ở trong component form.tsx và pass lại các hàm thực thi qua bên FormComponent, làm như vậy theo mình code sẽ được clean hơn rất nhiều.

<span class="token keyword">import</span> React <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> FormControl<span class="token punctuation">,</span> Grid<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@material-ui/core"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> CategoryItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./CategoryItem"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> CategoryType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"../types/form"</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> FormComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  categories<span class="token punctuation">,</span>
  handleChange<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
  categories<span class="token punctuation">:</span> CategoryType<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  handleChange<span class="token punctuation">:</span> <span class="token punctuation">(</span>categoryId<span class="token punctuation">:</span> number<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</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">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>form<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>Grid item<span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>h2<span class="token operator">&gt;</span>Categories<span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>Grid<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>FormControl<span class="token operator">&gt;</span>
          <span class="token punctuation">{</span>categories<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>category<span class="token punctuation">:</span> CategoryType<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">(</span>
              <span class="token operator">&lt;</span>CategoryItem
                category<span class="token operator">=</span><span class="token punctuation">{</span>category<span class="token punctuation">}</span>
                handleChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">handleChange</span><span class="token punctuation">(</span>category<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span>
              <span class="token operator">/</span><span class="token operator">&gt;</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 operator">&lt;</span><span class="token operator">/</span>FormControl<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>form<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

import React from "react";

import { FormControl, Grid, Button } from "@material-ui/core";

import { CategoryItem } from "./CategoryItem";

import { CategoryType } from "../types/form";

export const FormComponent = ({

categories,

handleChange,

}: {

categories: CategoryType[];

handleChange: (categoryId: number) => () => void;

}) => {

return (

<>

<form>

<h2>Categories</h2>

</Grid>

{categories.map((category: CategoryType) => {

return (

<CategoryItem

category={category}

handleChange={handleChange(category.id)}

/>

);

})}

</FormControl>

</form>

</>

);

};

<span class="token keyword">export</span> type CategoryType <span class="token operator">=</span> <span class="token punctuation">{</span>
  id<span class="token punctuation">:</span> number<span class="token punctuation">;</span>
  name<span class="token punctuation">:</span> string<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

export type CategoryType = {

id: number;

name: string;

};

<span class="token keyword">import</span> React <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> Checkbox<span class="token punctuation">,</span> FormControlLabel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@material-ui/core"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> CategoryType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"../types/form"</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> CategoryItem <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  category<span class="token punctuation">,</span>
  handleChange
<span class="token punctuation">}</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
  category<span class="token punctuation">:</span> CategoryType<span class="token punctuation">;</span>
  handleChange<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</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">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>FormControlLabel
      key<span class="token operator">=</span><span class="token punctuation">{</span>category<span class="token punctuation">.</span>id<span class="token punctuation">}</span>
      control<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">&lt;</span>Checkbox 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">&gt;</span><span class="token punctuation">}</span>
      label<span class="token operator">=</span><span class="token punctuation">{</span>category<span class="token punctuation">.</span>id <span class="token operator">+</span> <span class="token string">". "</span> <span class="token operator">+</span> category<span class="token punctuation">.</span>name<span class="token punctuation">}</span>
    <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

import React from "react";

import { Checkbox, FormControlLabel } from "@material-ui/core";

export const CategoryItem = ({

category,

handleChange

}: {

category: CategoryType;

handleChange: () => void;

}) => {

return (

<FormControlLabel

key={category.id}

control={<Checkbox onChange={handleChange} />}

label={category.id + ". " + category.name}

/>

);

};

Các bạn có thấy mình thêm 1 props handleChange vào trong FormComponent không? và nó được sử dụng để lấy id checkbox đã được click. Mục đích để chúng ta lấy các giá trị checkbox đã được chọn. Ok tiếp theo ta qua form.tsx và handle function handleChange:

<span class="token operator">...</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">Form</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">//tạo một state chứa các checkbox được chọn</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>categoriesSelector<span class="token punctuation">,</span> setCategoriesSelectors<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 punctuation">;</span>

  <span class="token keyword">const</span> <span class="token function-variable function">handleChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>currentCheckBoxSelectored<span class="token punctuation">:</span> number<span class="token punctuation">)</span> <span class="token operator">=&gt;</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 comment">//so sánh xem nếu category được chọn đã có trong state `categoriesSelector` chưa</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>categoriesSelector<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>currentCheckBoxSelectored<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">//nếu rồi thì tìm vị trí của nó theo tên phần tử `currentCheckBoxSelectored` và xóa nó đi</span>
      <span class="token keyword">let</span> arrCheckBoxSelectored <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>categoriesSelector<span class="token punctuation">]</span><span class="token punctuation">;</span>
      arrCheckBoxSelectored<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>
        categoriesSelector<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>currentCheckBoxSelectored<span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token number">1</span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token function">setCategoriesSelectors</span><span class="token punctuation">(</span>arrCheckBoxSelectored<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">//còn chưa thì chúng ta sẽ thêm nó vào `categoriesSelector`</span>
      <span class="token keyword">let</span> arrCheckBoxSelectored <span class="token operator">=</span> <span class="token punctuation">[</span>
        <span class="token operator">...</span>categoriesSelector<span class="token punctuation">,</span>
        currentCheckBoxSelectored
      <span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token function">setCategoriesSelectors</span><span class="token punctuation">(</span>arrCheckBoxSelectored<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 operator">...</span>
  
  <span class="token operator">&lt;</span>Grid container direction<span class="token operator">=</span><span class="token string">"column"</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>FormComponent
          categories<span class="token operator">=</span><span class="token punctuation">{</span>categories<span class="token punctuation">}</span>
          handleChange<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">&gt;</span>
   <span class="token operator">&lt;</span><span class="token operator">/</span>Grid<span class="token operator">&gt;</span>

...

//tạo một state chứa các checkbox được chọn

const [categoriesSelector, setCategoriesSelectors] = useState([]);

const handleChange = (currentCheckBoxSelectored: number) => () => {

//so sánh xem nếu category được chọn đã có trong state `categoriesSelector` chưa

if (categoriesSelector.includes(currentCheckBoxSelectored)) {

//nếu rồi thì tìm vị trí của nó theo tên phần tử `currentCheckBoxSelectored` và xóa nó đi

let arrCheckBoxSelectored = [...categoriesSelector];

arrCheckBoxSelectored.splice(

categoriesSelector.indexOf(currentCheckBoxSelectored),

1

);

setCategoriesSelectors(arrCheckBoxSelectored);

} else {

//còn chưa thì chúng ta sẽ thêm nó vào `categoriesSelector`

let arrCheckBoxSelectored = [

...categoriesSelector,

currentCheckBoxSelectored

];

setCategoriesSelectors(arrCheckBoxSelectored);

}

};

...

<FormComponent

categories={categories}

handleChange={handleChange}

/>

</Grid>

Thêm button Submit để check kết quả thôi nhỉ

<span class="token operator">...</span>

<span class="token keyword">const</span> <span class="token function-variable function">handleSubmit</span> <span class="token operator">=</span> event <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"categories"</span><span class="token punctuation">,</span> categoriesSelector<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 punctuation">;</span>
 <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token operator">...</span>
 <span class="token operator">&lt;</span>Grid container direction<span class="token operator">=</span><span class="token string">"column"</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>FormComponent
          categories<span class="token operator">=</span><span class="token punctuation">{</span>categories<span class="token punctuation">}</span>
          handleChange<span class="token operator">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span>
          handleSubmit<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">&gt;</span>
 <span class="token operator">&lt;</span><span class="token operator">/</span>Grid<span class="token operator">&gt;</span>

...

const handleSubmit = event => {

console.log("categories", categoriesSelector);

event.preventDefault();

};

...

<FormComponent

categories={categories}

handleChange={handleChange}

handleSubmit={handleSubmit}

/>

</Grid>

<span class="token keyword">import</span> React <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> FormControl<span class="token punctuation">,</span> Grid<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@material-ui/core"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> CategoryItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./CategoryItem"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> CategoryType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"../types/form"</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> FormComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token operator">...</span>
  handleSubmit
<span class="token punctuation">}</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
  handleSubmit<span class="token punctuation">:</span> <span class="token punctuation">(</span>event<span class="token punctuation">:</span> object<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</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">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>form onSubmit<span class="token operator">=</span><span class="token punctuation">{</span>handleSubmit<span class="token punctuation">}</span><span class="token operator">&gt;</span>
        <span class="token operator">...</span>
        <span class="token operator">&lt;</span>Grid container justify<span class="token operator">=</span><span class="token string">"flex-end"</span> xs<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>Button variant<span class="token operator">=</span><span class="token string">"contained"</span> color<span class="token operator">=</span><span class="token string">"primary"</span> type<span class="token operator">=</span><span class="token string">"submit"</span><span class="token operator">&gt;</span>
              Submit
            <span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">&gt;</span>
         <span class="token operator">&lt;</span><span class="token operator">/</span>Grid<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>form<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

import React from "react";

...

handleSubmit

}: {

...

handleSubmit: (event: object) => void;

}) => {

return (

<>

...

Submit

</Button>

</Grid>

</form>

</>

);

};

Cùng run xem kết quả nào:

và đây là kết quả khi mình lần đầu chọn 3 checkbox và sau đó bỏ chọn với check box 2. ryzen 5 đi

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Mẫu vật liệu UI + ReactJS + TypeScript (phần 1)

2. Demo

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

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