如何在react功能组件中切换按钮变量的className ?

Question

我有一个react functional组件，它将按钮作为变量，并在单击时启动一个函数。按钮是一个变量，因为这个函数将被导入到另一个功能组件中，而按钮是在这个外部函数中创建的。我还想在单击时设置和切换按钮类，以指示按钮/工具是否活动。我没能找到一种方法来切换className。在我的例子中，我使用useState钩子为类设置默认值，然后在click函数中，我根据另一个useState钩子的值更改类的值。这没有显示按钮的任何类。我可以指定className为activeClass外部的点击功能，它会那个类，但不能弄清楚如何切换。我也试过在返回语句中设置className，像这样:<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