javascript - 函数被声明但它的值从未被使用

Question

我正在尝试创建一个带有一些复选框的下拉菜单。我发现this reference并且认为是非常有值(value)的。我在示例代码中实现了它，但我得到 function is declared but its value is never used错误并且不明白为什么。

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

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

到目前为止我所做的事情:

除了进行大量研究之外，我还浏览了 this document以确保一切设置正确。我觉得是这样的。

我还发现了this useful post其中包含大量信息并在其中进行了一些挖掘，但我不确定是否与我的错误完全相关。

我用过<form> ，尽管我仍在学习此类组件并认为这可能是一个很好的练习。我不确定此时是否会出现此错误。

感谢您为解决问题指明了正确的方向。

Answer 1

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