Question

我的开关按钮有这个简单的反应组件，所有想要的是在我点击或切换它时设置我的真假活动状态，也许显示一个咖啡师或咖啡馆老板处于活动状态的控制台

[使用代码中的链接查看切换按钮 gif][1]


import React from "react";
import { Component } from "react";

export default class Switch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            active: true,
        }   
    }
    render() {
        const { active } = this.state;
        return (
            <div>
                <label className="switch">
                    <input type="checkbox" id="togBtn" ></input>
                    <div className="slider round">

                        <span className="Cafe_Owner">Cafe Owner</span>
                        <span className="Barista">Barista</span>

                    </div>
                </label>
            </div>
        )
    }
}


  [1]: https://i.stack.imgur.com/JyG6b.gif

Answer 1

这是我的解决方案的代码

import React from "react";
import { Component } from "react";

export default class Switch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            active: true,
        }  
        this.handleClick = this.handleClick.bind(this) 
    }
        handleClick() {
        this.setState((prevState) => ({
            active: !prevState.active
        }))
      }
    render() {
        const { active } = this.state;
        return (
            <div>
                <label className="switch">
                    <input type="checkbox" id="togBtn" ></input>
                    <div className="slider round" onClick={this.handleClick}>

                        <span className="Cafe_Owner">Cafe Owner</span>
                        <span className="Barista">Barista</span>

                    </div>
                </label>
            </div>
        )
    }
}

反应切换按钮

1 个答案: