使用 ReactJS 中的 Hooks 切换按钮以显示不同的内容

Question

I'm trying to create a switch button that can display 2 different contents depending on which of the 2 buttons I click on using the hooks in react js.

I would like to display for example a sentence "You have clicked on the left button" when I click on the left one and the opposite when I click on the right one.

I would like the content to be displayed just below the switch buttons.

In addition, I would like my button to remain active when I clicked on it. That is to say, it should be of a darker color since it is active.

Do you have an idea?

This is the piece of code:

import React,{useState} from 'react';
import {Button} from "react-bootstrap";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBars, faChartLine} from "@fortawesome/free-solid-svg-icons";
import CustomerTable from "../CustomerTable/CustomerTable";

export default function HookButtonSwitch(props) {
    const [resultatContenu, setResultatContenu] = useState('Content initial');
    const [state, setState] = useState(false);

    const handleEventSwitchButton = event => {

        let resultatContenu;
        switch(event.target.id) {
            case 'stats':
                console.log("Coucou Stats");
                resultatContenu = 'Stats';
                break;
            case 'list':
                console.log("Coucou List");
                resultatContenu = 'LIST';
                break;
        }
        setResultatContenu(resultatContenu);

    };

   const toggle = () => setState(!state);

    return (
        <div>

            <br />

            <Button
                id="list"
                variant="light"
                className="border-radius-left"
                onClick={handleEventSwitchButton}
            >
                <FontAwesomeIcon icon={faBars} />
            </Button>

            <Button
                id="stats"
                variant="light"
                className="border-radius-right"
                onClick={handleEventSwitchButton}
            >
                <FontAwesomeIcon icon={faChartLine} />
            </Button>

            <div> {resultatContenu} </div>

            {/* <p>-------</p>

            <div onClick={toggle}>
                <div className="toggle">
                    {state ? <div>Yes! 👍  </div>   : <div>No! 👎</div>}
                </div>
            </div>
            */}
        </div>
    )
}

Thank you in advance.

Answer 1

check hope its work

import React,{useState} from 'react';
import {Button} from "react-bootstrap";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBars, faChartLine} from "@fortawesome/free-solid-svg-icons";
import CustomerTable from "../CustomerTable/CustomerTable";

export default function HookButtonSwitch(props) {
    const [resultatContenu, setResultatContenu] = useState('Content initial');
    const [state, setState] = useState(false);

    const handleEventSwitchButton = (event,condition) => {

this.setState({buttonSwitch:condition})

        let resultatContenu;
        switch(event.target.id) {
            case 'stats':
                console.log("Coucou Stats");
                resultatContenu = 'Stats';
                break;
            case 'list':
                console.log("Coucou List");
                resultatContenu = 'LIST';
                break;
        }
        setResultatContenu(resultatContenu);

    };

   const toggle = () => setState(!state);
   const {buttonSwitch=false}= this.state
    return (
        <div>

            <br />

            <Button
                id="list"
                variant="light"
                className="border-radius-left"
                style={buttonSwitch&&{backgroundColor:'black'}}
                onClick={(e)=>handleEventSwitchButton(e,true)}
            >
                <FontAwesomeIcon icon={faBars} />
            </Button>

            <Button
                id="stats"
                variant="light"
                className="border-radius-right"
             style={!buttonSwitch&&{backgroundColor:'black'}}
                onClick={(e)=>handleEventSwitchButton(e,false)}
            >
                <FontAwesomeIcon icon={faChartLine} />
            </Button>

            <div> {resultatContenu} </div>

            {/* <p>-------</p>

            <div onClick={toggle}>
                <div className="toggle">
                    {state ? <div>Yes! 👍  </div>   : <div>No! 👎</div>}
                </div>
            </div>
            */}
        </div>
    )
}