javascript - React Bootstrap 导航中的复选框 -> NavItem 点击时不重新渲染

我在使用 React Bootstrap 的 Nav 和 NavItem 搭配 Checkbox 时遇到了一个奇怪的问题。问题是，如果我直接点击复选框而不是 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>
        )
    }
}

答案＃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>