React URL 根据复选框的状态在 OnChange 上重定向

Question

我有一个语义反应复选框，它可以在 false 和 true 之间切换。我有一个 onChange，当复选框的状态发生变化时，它会将页面更改为 link

onChange={() => window.location.href = '/link/newlink'}

我有第二个 link url：/link/anotherlink

如何做到这一点，当我的复选框切换到错误状态时，它会将用户带到 /link/anotherlink，当它切换到真实状态时，它会变为 /link/newlink？

到目前为止，这是我的代码

import * as React from "react";
import { Checkbox } from "semantic-ui-react";
import { NavLink, Redirect } from "react-router-dom";

type Props = {
    label: string;
};

type State = {
    status: boolean;
};


class OrderCatalog extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            status: false
        };
    }

    componentDidMount() {
        const status = localStorage.getItem("status");
        this.setState({ status: status === "true" ? true : false });
    }

    componentDidUpdate(nextProps, nextState) {
        localStorage.setItem("status", "" + this.state.status);
    }

    

    render() {
        return (
            <Checkbox
                onClick={() => this.setState({ status: !this.state.status })}
                onChange={() => window.location.href = '/link/newlink'}
                label={this.props.label}
                checked={!this.state.status}
                toggle
            />
        );
    }
}

export default OrderCatalog;

Answer 1

您可以这样检查：

onChange={() => window.location.href = this.state.status ? '/link/anotherlink' : '/link/newlink'}