iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0

Day11

開關通常用於兩個狀態的切換

以筆者常用個功能 會在nav中加入切換語系的開關

首先先在useState設置語言去監控

在開關的使用上再加上判斷去做處理

  const [lan, setlan] = useState("CH");

  const handlelan = (event) => {
    if(lan=='CH')
    {setlan("EN");}
    else{
      setlan("CH");
    }
  };

其中Switch 可控屬性onChange 決定想做的事情
label 來定顯示的語言
同時也可以 加入color 決定顏色的基調

   <FormControlLabel
            control={<Switch onChange={handlelan} name="gilad" />}
            label={lan}
          />
  

最後在想要改變的字串做處理
根據開關改變狀態 做語言的切換

  {lan=="CH"?"歡迎回來":"welcome"}  Vader

結果
Day12


上一篇
[Day 11] Select 下拉
下一篇
[Day 13] 常用數據顯示 Table 表格-1(制式版)
系列文
從 React 開始,讓你的ui material 起來15
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言