Question

使用带有React Bootstrap的Checkbox的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>

我还尝试在li内添加<Nav>项，但后来我收到了此警告：

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>

导航中的React Bootstrap复选框 - ＆gt; NavItem不会在点击时重新渲染

1 个答案: