Day-22 專案演練 - 修改與刪除代辦清單

14th鐵人賽 react junior front-end

aoigj100

2022-10-06 16:10:59

636 瀏覽

分享至

Day-22 專案演練 - 修改與刪除代辦清單 useState()

很開心的把表格的功能做完，但我似乎忘記了很多事情，如果它是個 todo list，那是不是除了新增，還要有刪除、修改、是否完成的狀態呢？恭喜我，終於想起來了呢，這個畫面是不是似曾相似呢 XD，該繼續來填坑了呢！

useState()

參考官方網站介紹與使用規則。

在 react 中，利用 state，可以將 UI 與資料內容綁定，這點在 class 或者 function 元件中都是一樣的，而一般學 react hook 時會碰到的第一個 hook 就是 useState()。

react hook 的規則 :

只能在 function 元件內使用
在 function 元件的頂曾呼叫
會用 use 作為開頭(不這樣寫的話，react 沒辦法幫你抓出規則上的使用錯誤)

const [count, setCount] = useState(0);

把被遺忘的 UI 放回去表格

因為操作是不需要被 useTable 掌管的資料，所以讓它脫離掌控！

...
            <Thead>
              {table.getHeaderGroups().map((headerGroup) => (
                <Tr>
                  {headerGroup.headers.map((header) => (
                    <Th
                      {...{
                        className: header.column.getCanSort()
                          ? "cursor-pointer select-none"
                          : "",
                        onClick: header.column.getToggleSortingHandler(),
                      }}
                    >
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                      {{
                        asc: " ?",
                        desc: " ?",
                      }[header.column.getIsSorted() as string] ?? null}
                    </Th>
                  ))}
                  <Th>操作</Th> // 增加操作表頭
                </Tr>
              ))}
            </Thead>
              <Tbody>
              {table.getRowModel().rows.map((row) => (
                <Tr key={row.id}>
                  {row.getVisibleCells().map((cell) => (
                    <Td key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </Td>
                  ))}
                  <Td>
                    <button className="px-[2px]">修改</button> // 增加與操作相應的內容
                    <button className="px-[2px]">刪除</button>
                  </Td>
                </Tr>
              ))}
            </Tbody>
...

添加修改功能

說到修改，就是要在點擊之後，去找到目前的 todo 是哪一個，去修改它的內容，我這次想用獨一 id 的方式去做這個功能，所以在原本的 list 裡面再添加一個 id :

const [list, setList] =
  useState <
  any >
  (() => [
    {
      id: "1",
      time: "2018-07-22",
      title: "購物",
      info: "日用品",
      checked: false,
    },
    {
      id: "2",
      time: "2022-09-15",
      title: "鐵人賽",
      info: "day-10",
      checked: true,
    },
    { id: "3", time: "2022-09-25", title: "摺棉被", info: "", checked: false },
  ]);

但後來加上刪除功能之後發現，因為 list 改變之後，本來放在元素上面的 id 因為重新渲染改變，但 list 裡面待辦事項的 id 並不會因此改變，這個問題我想先保留下來，在未來找個時間來進行處理。

<button
  className="px-[2px]"
  id={row.id}
  onClick={(e) => {
    const id = e.currentTarget.id;
    const currentItem = list[id];
  }}
>
  修改
</button>

添加刪除功能

本來是一樣使用找 id 的方式取得要刪除的待辦事項，後來我改用取得畫面資料來跟 list 中資料對造的方式來找出需要刪除的項目 :

<button
  className="px-[2px]"
  id={row.id}
  onClick={(e) => {
    const id = e.currentTarget.id;
    const currentItem = list[id];
    const nowList = list.filter((i) => i !== currentItem);
    setList(nowList);
  }}
>
  刪除
</button>