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

Posted 2023-03-23

【中文标题】如何在 reactstrap 中更改 customswitch 标签的开/关？

【英文标题】：How can I change customswitch label on/off in reactstrap?

【发布时间】：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

没关系，问题是你如何处理开/关状态

【参考方案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上的解决方案