[Day 12] 开关 Switch

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