I have a semantic react checkbox which toggles between false and true. I have an onChange
which when the state of the checkbox changes, it changes the page to the link
onChange={() => window.location.href = '/link/newlink'}
I have a second link with the following url: /link/anotherlink
How do I make it so when my checkbox is toggled to a false state, it takes the user to /link/anotherlink
and when it toggles to a true state it changes to /link/newlink
?
This is my code so far
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;
Aucun commentaire:
Enregistrer un commentaire