如何在反應功能組件中為按鈕變量切換 className？

Question

我有一個反應功能組件，它將按鈕作為變量，並在單擊時啟動一個函數。 該按鈕是一個變量，因為該函數正在導入到另一個功能組件中，並且該按鈕是在該外部函數中創建的。 我還想在單擊時設置和切換按鈕類，以指示按鈕/工具是否處於活動狀態。 我一直無法找到切換 className 的方法。 在我的示例中，我使用 useState 鈎子為類設置默認值，然后在 click 函數中，我根據另一個 useState 鈎子的值更改類的值。 這不會顯示按鈕的任何類。 我可以在 click 函數之外將 className 指定為 activeClass 並且它會指定該類，但無法弄清楚如何切換。 我也試過在 return 語句中設置 className，如下所示： <button className={btnActive ? 'one_class' : 'two_class'} onClick={function}</> <button className={btnActive ? 'one_class' : 'two_class'} onClick={function}</>但這也沒有設置類。 我究竟做錯了什么？ 這是我第一次嘗試使用 React 框架。

import React from 'react';
import { useInput } from '../hooks/useInput';
import {
    placesSource,
    places_lyr,
}
    from "../qgis2web/layers";
import {
    increaseThrobberCounter,
    decreaseThrobberCounter
}
    from "../qgis2web/throbberCounter";
import { addLayer, getErrorMessage, removeLayer } from "../qgis2web/qgis2web";
import { add_geojson_feats } from "../qgis2web/addGeojsonFeatures";

declare const ol, $, toastr;


const GetPlacesControl = ({ map, launchButton }) => {

    const [btnActive, setBtnState] = React.useState<boolean>(false);
    const [activeClass, setClass] = React.useState("fas fa-globe-americas");

    function clear_places_features(map) {
        placesSource.clear();
        removeLayer(places_lyr);
    }

    const toggle_get_places = (launchButton) => {
        setBtnState((btnActive) => {
            setClass((activeClass) => {
            if (btnActive) {
                setClass("fas fa-ban");
                $('html,body').css('cursor', 'default');
                map.un('click', runCallback);
                clear_places_features(map);

            } else {
                setClass("fas fa-globe-americas");
                $('html,body').css('cursor', 'crosshair');
                map.on('click', runCallback);
            }
            launchButton.className = activeClass;
            return launchButton.className;
        });
            return !btnActive;

        });
    }
    const runCallback = React.useCallback((evt) => {

        clear_places_features(map);

        $.ajax({
            type: "POST",
            contentType: "application/json;charset=utf-8",
            url: "api/get_places?x=" + evt.coordinate[0] + "&y=" + evt.coordinate[1],
            traditional: "true",
            datatype: "json",
            mimeType: 'application/json',
        }).done(function (response) {
            const places_feats = new ol.format.GeoJSON().readFeatures(response);

            if (places_feats.length == 0) {
                toastr.warning('no records found, try again');
            } else {
                placesSource.addFeatures(places_feats);
                map.getView().fit(placesSource.getExtent());
                places_lyr.setVisible(true);
                addLayer(places_lyr);
            }
        }).fail(function (jqXHR) {
            let msg = getErrorMessage(jqXHR);
            toastr.error(msg);
        }).always(function () {
            decreaseThrobberCounter();
        });
    }, []);

    React.useEffect(() => {
        const get_coords_on_click = (evt) => {
            let loc_coords = evt.coordinate;
            return loc_coords;
        };

        launchButton.addEventListener('click', toggle_get_places, false);
        map.on('singleclick', get_coords_on_click);

        return () => {
            launchButton.removeEventListener('click', toggle_get_places);
            map.un('singleclick', get_coords_on_click);
        };
    }, []);


    return (
        <button onClick={launchButton.toggle_get_places}></button>
    );
};

export default GetPlacesControl;

Answer 1

您的代碼不起作用

您應該嘗試使用useRef和classList.add/remove