切换按钮

渲染一个切换按钮组件。

• 使用 useState() 钩子将 isToggledOn 状态变量初始化为 defaultToggled。
• 渲染一个 <input> 元素，并将其 onClick 事件绑定到更新 isToggledOn 状态变量上，同时根据情况为包裹的 <label> 应用适当的 className。

.toggle input[type="checkbox"] {
  display: none;
}

.toggle.on {
  background-color: green;
}

.toggle.off {
  background-color: red;
}

const Toggle = ({ defaultToggled = false }) => {
  const [isToggleOn, setIsToggleOn] = React.useState(defaultToggled);

  return (
    <label className={isToggleOn ? 'toggle on' : 'toggle off'}>
      <input
        type="checkbox"
        checked={isToggleOn}
        onChange={() => setIsToggleOn(!isToggleOn)}
      />
      {isToggleOn ? '开' : '关'}
    </label>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <Toggle />
);