Month: January 2021

Redux Toolkit

reducer裡面要判斷陣列的時候，可以先slice深拷貝一下，
可是發現太多都是Proxy了，還是別在reducer故判斷好了

在createSlice裡面的initialState，記得如果有的值要設成null的話，它會沒辦法被destructuring出來。
例如 infoList: null

const { catList = [], dogList = [] } = infoList;

這時候就會報錯

所以要改用物件
infoList: {}

React Label

<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">

<label>
  Name:
  <input type="text" name="name" />
</label>

HTML長這樣
label可以包住input，也可以不包
包住input就不用給for值了喔
記得for對應的是id
radio的群組是用name來群組

There are 2 methods of labelling a form control using the HTML label element. You can wrap the control inside the label element or you can include the for attribute on the label element, which has a value matching the id value of the control it is intended to label.

HTML5 Accessibility Chops: form control labeling


然後React版本的for要用 htmlFor
然後點擊事件要綁在input上面，不能綁在label上

練習不用滑鼠

WebStorm快捷鍵

Ctrl + BGo To Definition（Navigate to declaration）
Alt + EnterShow intention actions
Alt + Shift + F10Run configurations
Ctrl + WExtend selection
Alt + F12Open Terminal
Shift + Alt + ↑↓Move Line Up/Down
Ctrl + +Expand
Alt + 1Jump to Project
Ctrl + F4Close Current File
F9break point
F5run debugger mode
Shift + F5stop debugger

Chrome 快捷鍵

Ctrl + PageUp / PageDown切換到上個分頁/下個分頁
Ctrl + W關閉目前分頁
Alt + D || Ctrl + L跳到網址列

參考資料：
WebStorm_ReferenceCard.pdf