声明了函数，但从未使用过它的值

Question

我正在尝试创建一个带有一些复选框的下拉菜单。我发现 this reference 并且觉得很有价值。我在我的示例代码中实现了它，但我收到 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

我在 React 工作已经一分钟了，但我认为这可能会解决您的问题

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

Answer 2

这段代码看起来很奇怪，但是如果我们谈论反应，就没有onclick，而是onClick（驼峰式）。

此外，您得到的不是错误，只是警告，您没有使用您拥有的功能。您只向 onClick 处理程序传递一个字符串 "onClick="showCheckboxes()"，但您需要传递此函数，因此它会像这样 onClick={showCheckboxes}

Answer 3

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

声明了函数，但从未使用过它的值

Function is declared but its value is never used

html

javascript

css

google-map-react