javascript - 单选按钮不会更新 NavItem 中的 UI

Question

有缺陷的代码(也在下面): https://codesandbox.io/s/4xklz52xkx

单选按钮应在单击后变为选中状态，但事实并非如此。这仅出现在NavItem中。删除 NavItem div 会使单选按钮再次工作:https://codesandbox.io/s/5x60q3440l

可能与此相关react bootstrap issue ，这个问题一直没有得到解决。该问题的 SO 帖子是 here 。我已经测试了答案中的解决方法，但也没有运气。

import React from "react";
import { render } from "react-dom";
import { Nav, NavItem, Radio } from "react-bootstrap";
import { BrowserRouter as Router } from "react-router-dom";

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: "one"
    };
  }

  handleChange = e => {
    this.setState({ selected: e.target.value });
    console.log(this.state);
  };

  render() {
    return (
      <div>
        <Nav bsStyle="tabs">
          <NavItem>
            <Radio
              name="radioGroup"
              checked={this.state.selected === "one"}
              value="one"
              onChange={this.handleChange}
            >
              one
            </Radio>
            <Radio
              name="radioGroup"
              checked={this.state.selected === "two"}
              value="two"
              onChange={this.handleChange}
            >
              two
            </Radio>
          </NavItem>
        </Nav>
      </div>
    );
  }
}

const App = () => (
  <Router>
    <Menu />
  </Router>
);

render(<App />, document.getElementById("root"));

Answer 1

出于某种原因，向 NavItem 添加一个非空的 href 可以使其正常工作。如果将 NavItem 更改为

<NavItem href = '#!'>

效果很好。只要将 href 留空或使用 # 作为 href，就不起作用。我将 href 命名为 #! 假设您不会使用 ! 命名任何 html 元素 !!

我认为this code snippet在 React Bootstrap 中是问题所在。但我并不完全确定。我会找到根本原因并更新答案。