Reactjs 如何在reactstrap中更改customswitch标签的开/关？

我在我的项目中使用自定义开关。如何更改标签的开/关

const ProfileSwitch = ({title, text, name, id, label}) => {
    return <div className="profile-switch">
        <div className="profile-switch__text">
            <p>{title}</p>
            <span>{text}</span>
        </div>
        <CustomInput type="switch" id={id} name={name} label={label} />
    </div>
}

export default ProfileSwitch;

constprofileswitch=（{title，text，name，id，label}）=>{
返回
{title}

{text}
}
导出默认配置文件开关；

您可以使用toggle和useState处理这种情况

import React, { useState } from "react";
import { CustomInput } from "reactstrap";

const ProfileSwitch = ({ title, text, name, id, label }) => {
  const [isToggled, setToggled] = useState(false);
  const toggleTrueFalse = () => setToggled(!isToggled);

  return (
    <div className="profile-switch">
      <div className="profile-switch__text">
        <p>{title}</p>
        <span>{text}</span>
      </div>
      <CustomInput
        onClick={toggleTrueFalse}
        type="switch"
        id={id}
        name={name}
        label={isToggled === true ? "on" : "off"}
      />
    </div>
  );
};

export default ProfileSwitch;

ProfileSwitch.defaultProps = {
  title: "title",
  text: "text"
};

import React，{useState}来自“React”；
从“reactstrap”导入{CustomInput}；
const ProfileSwitch=（{title，text，name，id，label}）=>{
常量[isToggled，setToggled]=useState（false）；
常量toggleTrueFalse=（）=>setToggled（！isToggled）；
返回(
{title}

{text}
);
};
导出默认配置文件开关；
ProfileSwitch.defaultProps={
标题：“标题”，
文本：“文本”
};

---

我已经把你的代码分叉了，下面是关于

的解决方案，你所说的标签开/关是什么意思，请详细说明？这些道具是从哪里来的？

标题、文本、姓名、id、标签是否存储在状态中？@AbuSufian我的英语不太好。在这里你可以看看，我想当复选框未选中时，标签文本更改为off@ZsoltMeszaros在这里您可以查看codesandbox.io/s/crimson-bash-ntd6e？file=/src/switch.js:349-355没关系，问题是如何处理开/关状态