Javascript 函数已声明，但从未使用其值

我试图创建一个带有一些复选框的下拉菜单。 我发现并认为这是非常有价值的。我在我的示例代码中实现了它，但我得到的函数是声明的，但它的值从未被错误使用过，我不明白为什么

下面是我正在使用的代码片段：

import React from 'react';
import styled from 'styled-components';
import { Table } from 'reactstrap';
import GoogleMapReact from 'google-map-react';
import { Card, CardImg, CardText, CardBody, CardTitle, /*CardSubtitle,*/ Button } from 'reactstrap';

const MapContainer = styled.div`
some data....
`;

var expanded = false;
function showCheckboxes() {
    var checkboxes = document.getElementById('checkboxes');
    if (!expanded) {
        checkboxes.style.display = 'block';
        expanded = true;
    } else {
        checkboxes.style.display = 'none';
        expanded = false;
    }
}

const BoatMap = () => (
    <div className="google-map">
        <GoogleMapReact
            bootstrapURLKeys={{ key: 'MY_KEY' }}
            center={{
                lat: 42.4,
                lng: -71.1
            }}
            zoom={11}
        >
            {/* Insert components here */}
            <form>
                <div class="multiselect">
                    <div class="selectBox" onClick="showCheckboxes()">
                        <select>
                            <option>Select an option</option>
                        </select>
                        <div class="overSelect" />
                    </div>
                    <div id="checkboxes">
                        <label for="one">
                            <input type="checkbox" id="one" />First checkbox
                        </label>
                        <label for="two">
                            <input type="checkbox" id="two" />Second checkbox
                        </label>
                        <label for="three">
                            <input type="checkbox" id="three" />Third checkbox
                        </label>
                    </div>
                </div>
            </form>
        </GoogleMapReact>
    </div>
);

export default function GoogleMap() {
    return (
        <MapContainer>
        </MapContainer>
    );
}

到目前为止我所做的：

除了做了大量的研究外，我还仔细检查了一下，以确保一切都设置正确。我想是的

我还发现了其中包含了很多信息，并在其中挖掘了一点，但我不确定是否与我的错误完全相关

虽然我还在学习这种类型的组件，但我还是使用了它，并认为这可能是一个很好的练习。我不确定这一错误是否是由于这一点

---

谢谢你为解决这个问题指明了正确的方向。

我已经有一分钟没有在react工作了，但我认为这可能会解决你的问题

<div class="selectBox" onclick="() => showCheckboxes()">

---

这段代码看起来很奇怪，但如果我们讨论的是react，那么就没有onclick，而是在camelCase中使用onclick

---

加上你得到的不是错误，只是警告，你没有使用你拥有的函数。只需将字符串onClick=showCheckboxes传递给onClick处理程序，但需要传递此函数，因此类似于onClick={showCheckboxes}

因为showCheckboxes是在BoatMap函数声明之外声明的，所以解决方案是使用onClick={showCheckboxes}。请注意，即使在BoatMap中声明了ShowCheckBox，您也不会使用this关键字，因为BoatMap不是一个类。

函数已声明，但从未使用过它的值。您从何处获得该关键字？这是关于哪个功能的？@CalvinNunes，谢谢你阅读这个问题。这就是它的来源：“showcheckbox”已经定义，但从未定义过used@AndrewLohr，谢谢你阅读这个问题。不幸的是，还是同样的错误。我想知道我是否在正确的位置声明了函数显示复选框，但没有使用this。所以onClick={showCheckboxes}如果没有这个关键字，那就是onClick={showCheckboxes}，因为这个函数在BoatMap函数之外。很抱歉，我拼错了，我更正了这个问题，但是你得到的不是错误，不是错误，只是警告，你没有使用你拥有的函数。您只需将字符串onClick=showCheckboxes传递给onClick处理程序，但您需要传递此函数，因此它将类似于onClick={showCheckboxes}@ArtemMatiushenko，我建议您在答案中添加注释，以使其更完整