使用 ReactJS 中的 Hooks 切換按鈕以顯示不同的內容

Question

我正在嘗試創建一個切換按鈕，該按鈕可以顯示 2 個不同的內容，具體取決於我使用 react js 中的鈎子單擊的 2 個按鈕中的哪一個。

例如，當我單擊左側按鈕時，我想顯示一個句子“您已單擊左側按鈕”，而當我單擊右側按鈕時，則相反。

我希望內容顯示在開關按鈕的正下方。

此外，我希望我的按鈕在單擊時保持活動狀態。 也就是說，它應該是更深的顏色，因為它是活躍的。

你有想法嗎？

這是一段代碼：

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>
    )
}

先感謝您。

Answer 1

檢查希望它的工作

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>
    )
}