如何在React中的Toggle Switch组件中添加文本？

在React中的Toggle Switch组件中添加文本的方法可以通过在组件中使用label元素来实现。具体的步骤如下：

导入React和需要的样式库：

import React, { useState } from 'react';
import './ToggleSwitch.css'; // 样式文件

创建ToggleSwitch组件并定义所需的状态和事件处理函数：

const ToggleSwitch = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleToggle = () => {
    setIsChecked(!isChecked);
  };

  return (
    <label className="toggle-switch">
      <input type="checkbox" checked={isChecked} onChange={handleToggle} />
      <span className="switch"></span>
      <span className="label-text">{isChecked ? '开启' : '关闭'}</span>
    </label>
  );
};

export default ToggleSwitch;

创建ToggleSwitch.css样式文件并定义所需的样式：

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.switch {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 15px;
  transition: transform 0.2s;
}

.label-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 40px;
  font-size: 14px;
}

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

input[type="checkbox"]:checked + .switch {
  background-color: #00bcd4;
  transform: translateX(30px);
}

在父组件中使用ToggleSwitch组件并添加文本标签：

import React from 'react';
import ToggleSwitch from './ToggleSwitch';

const App = () => {
  return (
    <div>
      <ToggleSwitch />
      <label>开关状态: <ToggleSwitch /></label>
    </div>
  );
};

export default App;

这样就可以在Toggle Switch组件中添加文本并实现开关效果了。在组件中使用label元素包裹input和span元素，通过设置checked属性控制开关状态，并使用onChange事件处理函数更新状态。通过设置label-text类的内容根据开关状态来显示相应的文本。可以根据实际需求调整样式和文本内容。

腾讯云相关产品和产品介绍链接地址：