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

错误的代码（也在下面）：
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"));

最佳答案

由于某些原因，在href中添加一个非空的NavItem使其起作用。如果将NavItem更改为

<NavItem href = '#!'>

它工作正常。只要您将href留为空白或将#用作href，它就不会起作用。我命名为href #!假设您不会使用!命名任何html元素！

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

关于javascript - 单选按钮不会更新NavItem中的UI，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51825659/