0

我正在尝试创建一个带有一些复选框的下拉菜单。我发现这个参考并认为非常有价值。我在我的示例代码中实现了它，但我得到了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>
    );
}

到目前为止我做了什么：

除了进行大量研究之外，我还查看了这份文档以确保所有内容都正确设置。我觉得是这样的。

我还发现了这篇有用的帖子，其中包含大量信息并在其中挖掘了一些内容，但我不确定是否与我的错误完全相关。

我使用<form>了 ，尽管我仍在学习这种类型的组件并认为这可能是一个很好的练习。我不确定这个错误是否可能是由于这一点。

感谢您指出解决问题的正确方向。

4

3 回答 3

1

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

于 2020-01-23T19:29:53.013 回答
0

这段代码看起来很奇怪，但如果我们谈论的是 react，没有onclick,onClick而是（在 camelCase 中）。

加上你得到的不是错误，只是警告，你没有使用你拥有的函数。你传递给 onClick 处理程序只是一个字符串“onClick="showCheckboxes()”，但是你需要传递这个函数，所以它会像这样 onClick={showCheckboxes}

于 2020-01-23T19:22:13.150 回答
0

自从我参与反应以来已经有一分钟了，但我认为这可能会解决你的问题

<div class="selectBox" onclick="() => showCheckboxes()">
于 2020-01-23T19:17:14.617 回答