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

Question

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

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

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>

我还尝试添加一个 li里面的项目 <Nav>但后来我收到了这个警告:

React does not recognize the activeKey prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase activekey instead. If you accidentally passed it from a parent component, remove it from the DOM element.

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>