開關通常用於兩個狀態的切換
以筆者常用個功能 會在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