Функция объявлена, но ее значение никогда не используется - PullRequest
Новая
       12

Функция объявлена, но ее значение никогда не используется

0 голосов
/ 23 января 2020

Я пытаюсь создать выпадающее меню с несколькими флажками. Я нашел эту ссылку и думаю, что это очень ценно. Я реализовал это в своем примере кода, но я получаю ошибку 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>, хотя я все еще изучаю этот тип компонентов и думал, что это может быть хорошим упражнением. Я не уверен, что ошибка может быть связана с этим на данный момент.

Спасибо за указание в правильном направлении для ее решения.

Ответы [ 3 ]

1 голос
/ 23 января 2020

Поскольку showCheckboxes объявляется вне объявления функции BoatMap, решение заключается в использовании onClick={showCheckboxes}. Обратите внимание, что даже если showCheckboxes был объявлен внутри BoatMap, вы не будете использовать ключевое слово this, так как BoatMap не является классом.

0 голосов
/ 23 января 2020

Этот код выглядит так странно, но если мы говорим о реакции, то нет onclick, а вместо onClick (в camelCase).

Кроме того, что вы получаете, это не ошибка, просто предупреждаю, что вы не использовали функцию, которая есть у вас. Вы передаете обработчику onClick просто строку «onClick =» showCheckboxes () », но вам нужно передать эту функцию, поэтому она будет выглядеть так: onClick = {showCheckboxes}

0 голосов
/ 23 января 2020

это была минута, с тех пор как я работал в реакции, но я думаю, что это может решить вашу проблему 

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