如何更改 reactstrap 中的 customswitch 标签 on/off？

Question

我在我的项目中使用了 reactstrap customswitch。如何更改标签 on/off？

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;

Answer 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

上的解决方案

如何更改 reactstrap 中的 customswitch 标签 on/off？

How can I change customswitch label on/off in reactstrap?

reactjs

react-hooks

reactstrap