React 切换组件 | 实践编程教程

简介

在本实验中，我们将探索如何使用 React 实现一个切换组件。切换组件是一种常见的用户界面 (UI) 元素，用于在两种状态之间进行切换。我们将使用 useState() 钩子来管理组件的状态，并根据其状态应用不同的 CSS 类。在本实验结束时，你将更好地理解如何在 React 中创建可复用的 UI 组件。

切换组件

虚拟机中已提供了 index.html 和 script.js。一般来说，你只需在 script.js 和 style.css 中添加代码。

要渲染一个切换组件，请按以下步骤操作：

使用 useState() 钩子将 isToggledOn 状态变量初始化为 defaultToggled。
渲染一个 <input> 元素，并绑定其 onClick 事件以更新 isToggledOn 状态变量。为包裹的 <label> 元素应用适当的 className。
使用以下 CSS 为切换组件设置样式：

.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 ? "ON" : "OFF"}
    </label>
  );
};

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

请点击右下角的“上线”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

可复用的 React 切换组件

简介

切换组件

总结