导航中的 React Bootstrap 复选框 ->NavItem 不会在点击时重新渲染 [英] React Bootstrap Checkbox in Nav -> NavItem does not rerender on click
问题描述
我在 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";从'react-router-bootstrap'导入{LinkContainer}；从react-bootstrap"导入 { Col, Nav, NavItem, Checkbox };接口 IProps {}接口 IState {showMap:布尔值}导出类 Menu 扩展 React.Component{构造函数(道具:任何){超级(道具)；this.state = {显示地图:真实}}toggleCheckbox =(事件:任何)=>{event.preventDefault();this.setState({ showMap: !this.state.showMap });}使成为() {返回 (<div><Nav bsStyle="tabs" activeKey="1"><NavItem eventKey="1">Test</NavItem></LinkContainer><NavItem eventKey="2">Test2</NavItem></LinkContainer><NavItem eventKey="3" onClick={this.toggleCheckbox}><Checkbox name="showMap" inline checked={this.state.showMap} readOnly >显示地图 </Checkbox></NavItem></导航> )}}
更新:
也这样试过，结果还是一样:
import * as React from "react";import * as ReactDOM from "react-dom";从'react-router-bootstrap'导入{LinkContainer}；import { Navbar, Nav, NavItem, Checkbox } from "react-bootstrap";接口 IProps {}接口 IState {showMap:布尔值}导出类 Menu 扩展 React.Component{构造函数(道具:任何){超级(道具)；this.state = {显示地图:真实}}toggleCheckbox =(事件:任何)=>{event.preventDefault();this.setState({ showMap: !this.state.showMap });}使成为() {返回 (<div><导航栏><Nav bsStyle="tabs" activeKey="1"><NavItem eventKey="1">Test</NavItem></LinkContainer><NavItem eventKey="2">Test2</NavItem></LinkContainer><NavItem eventKey="5" onClick={this.toggleCheckbox}><input type="checkbox" name="showMap"选中={this.state.showMap} readOnly/>显示地图</NavItem></导航></导航栏> )}}
在此处创建了 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',}...</导航><div onClick={this.toggleCheckbox} role='button' style={showMapStyle}><input type="checkbox" name="showMap"选中={this.state.showMap} readOnly/>显示地图</div></导航栏>我也尝试在 <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"选中={this.state.showMap} readOnly/>显示地图</li>I have a peculiar problem with using a Nav and NavItem with a Checkbox from React Bootstrap. The thing is that if I click directly on the checkbox and not the NavItem button the checkbox will not re-render correctly but my state has updated.
Example: Given the code below I render the component and click directly on the checkbox. In this case showMap will be set to false since we set it to true in the constructor but the checkbox will still be checked in the html view. If I however click on the NavItem but not directly on the checkbox both the state showMap is updated correctly as well as the 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>
)
}
}
Update:
Tried it like this as well, still the same result:
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>
)
}
}
Created an issue with React Bootstrap here. https://github.com/react-bootstrap/react-bootstrap/issues/2876
They did however think it had to do with React so I created an issue with them https://github.com/facebook/react/issues/11539.
The React team however got to the conclusion this was browser native behavior.
If anyone ends up here this is how I fixed it:
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>
I also tried with adding a li item inside <Nav> but then I got this warning:
React does not recognize the
activeKeyprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseactivekeyinstead. 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>
这篇关于导航中的 React Bootstrap 复选框 ->NavItem 不会在点击时重新渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
