React Bootstrap Checkbox dans Nav -> L'élément NavItem ne se met pas à jour lors du clic

Question

J'ai un problème particulier avec l'utilisation d'une Nav et NavItem avec une case à cocher de React Bootstrap. Le problème est que si je clique directement sur la case à cocher et non sur le bouton NavItem, la case à cocher ne se réaffichera pas correctement mais mon état a été mis à jour.

Exemple : Avec le code ci-dessous, je rends le composant et clique directement sur la case à cocher. Dans ce cas, showMap sera défini sur false car nous l'avons défini sur true dans le constructeur mais la case à cocher restera cochée dans la vue html. Si je clique cependant sur le NavItem mais pas directement sur la case à cocher, à la fois l'état showMap est mis à jour correctement ainsi que la vue.

https://react-bootstrap.github.io/components.html#navs

import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinkContainer } from 'react-router-bootstrap';
import { Col, Nav, NavItem, Checkbox } from "react-bootstrap";

interface IProps {

}

interface IState {
    showMap: boolean
}

export class Menu extends React.Component {
    constructor(props: any) {
        super(props);
        this.state = {
            showMap: true
        }
    }

    toggleCheckbox = (event: any) => {
        event.preventDefault();
        this.setState({ showMap: !this.state.showMap });
    }

    render() {
        return (

                        Test

                        Test2

                    Afficher la carte 

        )
    }
}

Mise à jour :

J'ai également essayé de le faire de cette façon, et j'obtiens toujours le même résultat :

import * as React from "react";
import * as ReactDOM from "react-dom";
import { LinkContainer } from 'react-router-bootstrap';
import { Navbar, Nav, NavItem, Checkbox } from "react-bootstrap";

interface IProps {

}

interface IState {
    showMap: boolean
}

export class Menu extends React.Component {
    constructor(props: any) {
        super(props);
        this.state = {
            showMap: true
        }
    }

    toggleCheckbox = (event: any) => {
        event.preventDefault();
        this.setState({ showMap: !this.state.showMap });
    }

    render() {
        return (

                            Test

                            Test2

                        Afficher la carte

        )
    }
}

Answer 1

Créé un problème avec React Bootstrap ici. https://github.com/react-bootstrap/react-bootstrap/issues/2876

Cependant, ils ont pensé que c'était lié à React, donc j'ai créé un problème avec eux https://github.com/facebook/react/issues/11539.

L'équipe React en est arrivée à la conclusion qu'il s'agissait d'un comportement natif du navigateur.

Si quelqu'un arrive ici, voici comment je l'ai corrigé :

toggleCheckbox = (event: any) => {
    this.setState({ showMap: !this.state.showMap });
}

const showMapStyle: React.CSSProperties = {
    paddingTop: '15px',
    paddingBottom: '15px',
}

    ...

    Montrer la carte

J'ai aussi essayé d'ajouter un élément li à l'intérieur de

, mais j'ai reçu cet avertissement :

React ne reconnaît pas la propriété activeKey sur un élément DOM. Si vous voulez qu'elle apparaisse dans le DOM en tant qu'attribut personnalisé, écrivez-la en minuscules activekey à la place. Si vous l'avez accidentellement passée depuis un composant parent, retirez-la de l'élément DOM.

https://github.com/react-bootstrap/react-bootstrap/issues/2199

Montrer la carte