React.JS 创建带状态的切换开关

Question

目前我有一个来自 Semantic UI React 库的切换开关，我正在将页面上的 checked 属性默认设置为 false。

我想让它可以切换，以便用户可以点击它，但我需要添加一个 OnClick 事件属性。我想创建一个函数来处理这个问题，但我不想使用 React.JS 版本 16 中引入的状态挂钩，我不确定如何去做。

这是我的 ToggleSwitch.tsx 文件，我在其中创建了切换开关

    import * as React from "react";
import { Checkbox } from 'semantic-ui-react'
import * as PropTypes from "prop-types";

const ToggleSwitch = ({ id, name,label, checked, onclick }) => {

    return (
        <Checkbox
            name={name}
            id={id}
            label={label}
            checked={checked}
            onclick={onclick}
            toggle

        />
    );
}

ToggleSwitch.propTypes = {
    id: PropTypes.string.isRequired,
    checked: PropTypes.bool.isRequired,
    label: PropTypes.string,
    name: PropTypes.string,
    onclick: PropTypes.func,
   
};

export default ToggleSwitch;

然后我将开关插入到我的 subheader.tsx 中，它在我的网站上的多个页面上创建了一个子标题，现在将有这个开关

import * as React from "react";
import ToggleSwitch from './new_layout/ToggleSwitch'

interface Props {
    name: string;
  renderAction?: () => any;
}




const SubHeader: React.SFC<Props> = ({ name, renderAction }) => {
    return (
        <div className="settings-submenu">
            <div className="settings-submenu-name">{name}</div>
            <div className="settings-submenu-name">{renderAction && renderAction()}</div>
            <ToggleSwitch name='LayoutToggleSwitch' label='Enable New Layout' id='LayoutToggleSwitch' checked={false} onclick = {} />

        </div>
    
  );
};

export default SubHeader;

我不确定要在我的 OnClick 函数中放入什么才能使这个开关在我单击它时能够像当前一样切换，它不会从它的 checked 值改变false

Answer 1

使用 checked 属性将阻止您通过单击更改复选框的状态：您可能应该使用 defaultChecked={false}.

但是，如果您想与复选框交互，在某些时候您仍然需要一些状态管理：您可以使用挂钩（React documentation 提供了 really 对 useState 钩子的简单介绍），或使用您将在点击时更新并传递给选中属性的状态对象。

Answer 2

可以在subHeader组件中使用useState，初始化为false作为默认值。

const [newLayoutEnabled, setNewLayoutEnabled] = useState(false);

const handleToggleSwitchClick = () => {
   setNewLayoutEnabled(!newLayoutEnabled);
}

然后将newLayoutEnabled和handleToggleSwitchClick传递给ToggleSwitch组件。

React.JS 创建带状态的切换开关

React.JS creating toggle switch with state

javascript

onclick

typescript

reactjs

react-props