Nav 中的 React Bootstrap Checkbox -> NavItem 不会在单击时重新呈现

Question

我在使用带有来自 React Bootstrap 的复选框的 Nav 和 NavItem 时遇到了一个特殊的问题。问题是，如果我直接单击复选框而不是 NavItem 按钮，复选框将不会正确重新呈现，但我的状态已更新。

示例：给定下面的代码，我渲染组件并直接单击复选框。在这种情况下，showMap 将设置为 false，因为我们在构造函数中将其设置为 true，但在 html 视图中仍会选中复选框。但是，如果我单击 NavItem 而不是直接单击复选框，则状态 showMap 和视图都会正确更新。

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<IProps, IState> {
    constructor(props: any) {
        super(props);
        this.state = {
            showMap: true
        }
    }

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

    render() {
        return (
            <div>
                <Nav bsStyle="tabs" activeKey="1">
                    <LinkContainer to="/test">
                        <NavItem eventKey="1">Test</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/test2">
                        <NavItem eventKey="2">Test2</NavItem>
                    </LinkContainer>
                    <NavItem eventKey="3" onClick={this.toggleCheckbox}><Checkbox name="showMap" inline checked={this.state.showMap} readOnly >
                    Show Map </Checkbox></NavItem>
                </Nav>
            </div>
        )
    }
}

更新：

也这样试了，结果还是一样：

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<IProps, IState> {
    constructor(props: any) {
        super(props);
        this.state = {
            showMap: true
        }
    }

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

    render() {
        return (
            <div>
                <Navbar>
                    <Nav bsStyle="tabs" activeKey="1">
                        <LinkContainer to="/test">
                            <NavItem eventKey="1">Test</NavItem>
                        </LinkContainer>
                        <LinkContainer to="/test2">
                            <NavItem eventKey="2">Test2</NavItem>
                        </LinkContainer>
                        <NavItem eventKey="5" onClick={this.toggleCheckbox}><input type="checkbox" name="showMap"
                            checked={this.state.showMap} readOnly />Show map</NavItem>
                    </Nav>
                   </Navbar>
            </div>
        )
    }
}

Answer 1

在此处创建了 React Bootstrap 问题。 https://github.com/react-bootstrap/react-bootstrap/issues/2876

但他们确实认为这与 React 有关，所以我向他们提出了一个问题 https://github.com/facebook/react/issues/11539。

然而，React 团队得出的结论是这是浏览器原生行为。

如果有人在这里结束，这就是我修复它的方法：

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

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

    ...
    </Nav>
    <div onClick={this.toggleCheckbox} role='button' style={showMapStyle}><input type="checkbox" name="showMap"
        checked={this.state.showMap} readOnly />Show map</div>
</Navbar>

我也尝试在<Nav> 中添加一个li 项目，但后来我收到了这个警告：

React 无法识别 DOM 元素上的 activeKey 属性。如果你 故意希望它作为自定义属性出现在 DOM 中， 将其拼写为小写activekey。如果你不小心通过了 从父组件中移除它，从 DOM 元素中移除它。

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

<li onClick={this.toggleCheckbox} role='button' style={showMapStyle}><input type="checkbox" id="showMap" name="showMap"
    checked={this.state.showMap} readOnly />Show map</li>