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

【问题标题】：How can I change customswitch label on/off in reactstrap?如何在 reactstrap 中更改 customswitch 标签的开/关？
【发布时间】：2021-03-15 21:55:09
【问题描述】：

我在我的项目中使用 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;

【问题讨论】：

标签开/关是什么意思，请详细说明？
props 来自哪里？ title, text, name, id, label 是否存储在状态中？
@AbuSufian 我的英语不好。 codesandbox.io/s/crimson-bash-ntd6e?file=/src/switch.js:349-355这里你可以看，我想当复选框未选中时，标签文本更改为关闭
@ZsoltMeszaros 在这里你可以看看codesandbox.io/s/crimson-bash-ntd6e?file=/src/switch.js:349-355
没关系，问题是你如何处理开/关状态

标签： reactjs react-hooks reactstrap

【解决方案1】：

您可以使用 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"
};

我已经分叉了你的代码，所以这是codesandbox上的解决方案

【讨论】：