Question

突出显示的代码（也在下面）： https://codesandbox.io/s/4xklz52xkx

单击后，单选按钮应该被选中，但是没有被选中。此 only 仅出现在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

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

<NavItem href = '#!'>

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

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

Answer 2

尝试在处理程序中使用e.preventDefault（）。看起来像是默认设置为原始状态。

单选按钮不会更新NavItem

2 个答案: