单选按钮不会更新 NavItem 中的 UI答案

【问题标题】：Radio button does not update UI in NavItem单选按钮不会更新 NavItem 中的 UI
【发布时间】：2018-08-13 15:22:12
【问题描述】：

错误代码（也在下方）： https://codesandbox.io/s/4xklz52xkx

单选按钮在单击后应该会被选中，但不会。这仅出现在 NavItem 中。删除 NavItem div 使单选按钮再次起作用：https://codesandbox.io/s/5x60q3440l

可能与此react bootstrap issue 相关，该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"));

【问题讨论】：

NavItem 在内部是一个<a>，对吧？
对，<li> 和 <a>。 <li role="presentation" class=""><a role="button" href="#">...</a></li>
当<a> 元素上的点击事件被触发时，您是否尝试过 preventDefault() 方法（如 GitHub 问题中所述）？
我做到了。但是删除preventDefault() 对他们的情况有所帮助。但它最初并没有在这里使用。

标签： javascript reactjs react-bootstrap

【解决方案1】：

出于某种原因，将非空的href 添加到NavItem 可以使其工作。如果您将 NavItem 更改为

<NavItem href = '#!'>

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

我认为反应引导程序中的this code snippet 是问题所在。但我不完全确定。我会找到根本原因并更新答案。

【讨论】：

哇，这令人印象深刻——你是怎么想出来的？知道 SafeAnchor 与 NavItem 有什么关系吗？它在NavLink 中使用，并且以某种方式 NavLink 成为 NavItem 的子项，包装了单选按钮。因此，当单选按钮被按下时，NavLink 会阻止单选按钮的默认行为。
我浏览了代码，这（SafeAnchor 中的代码 sn-p）看起来有点可疑。您正在查看不同版本的 react-bootstrap 代码。如果您看一下我在答案中放置的链接，您可以看到SafeAnchor 直接用于NavItem 元素中。
-- "NavLink 阻止单选按钮的默认行为" 但是单选按钮触发 onChange 事件而不是 click 事件。问题仍然存在，为什么会触发 handleOnChange 并更新状态但反应不会重新渲染。

【解决方案2】：

尝试在您的处理程序中使用 e.preventDefault()。看起来它默认为原始状态。

【讨论】：

在这里试过：codesandbox.io/s/zxxp25q7k3。我相信preventDefault 正在破坏单选按钮的默认行为。我现在正在研究 react bootstrap 源代码。