HTML + React：单选按钮卡在最初设置为“已选中”的按钮上答案

【问题标题】：HTML + React: Radio button stuck on the one initially set as "checked"HTML + React：单选按钮卡在最初设置为“已选中”的按钮上
【发布时间】：2015-04-02 14:30:39
【问题描述】：

我有一组两个单选按钮，其中一个在页面加载时被选中。看来我无法将其更改为第二个。如果重要的话，HTML 是由 reactjs 构建的。 chrome 上的标记如下所示：

<fieldset data-reactid=".0.0.0.0.0.0.1">
<label for="coop-radio-btn" data-reactid=".0.0.0.0.0.0.1.0">
    <span data-reactid=".0.0.0.0.0.0.1.0.0">To a Cooperative</span>
    <input type="radio" name="requestOnBehalfOf" value="coop" id="coop-radio-btn" data-reactid=".0.0.0.0.0.0.1.0.1">
</label>
<label for="union-radio-btn" data-reactid=".0.0.0.0.0.0.1.1">
    <span data-reactid=".0.0.0.0.0.0.1.1.0">Additional Request</span>
    <input type="radio" name="requestOnBehalfOf" value="union" checked="" id="union-radio-btn" data-reactid=".0.0.0.0.0.0.1.1.1">
</label>
</fieldset>

【问题讨论】：

你也应该分享你的反应组件代码。您可能正在使用反映 value 属性值而不是用户输入的受控组件：facebook.github.io/react/docs/forms.html#controlled-components

标签： javascript html radio-button reactjs

【解决方案1】：

这样做的原因是 React 正在制作 inputs 受控组件，因为每个输入的值都是从服务器端设置的。

引用Brandon's answer:

如果您将value={whatever} 属性添加到输入，使其成为受控组件，那么如果您添加更新@987654326 值的onChange 处理程序，则它是只读的@。来自the React docs：

为什么选择受控组件？

在 React 中使用诸如 <input> 之类的表单组件带来了编写传统表单 HTML 时所没有的挑战。例如，在 HTML 中：
<input type="text" name="title" value="Untitled" />
这会呈现一个输入已初始化，其值为Untitled。当用户更新输入时，节点的值 property 会改变。但是，node.getAttribute('value') 仍将返回初始化时使用的值，Untitled。

与 HTML 不同，React 组件必须在任何时间点表示视图的状态，而不仅仅是在初始化时。例如，在 React 中：
render: function() {
  return <input type="text" name="title" value="Untitled" />;
}
由于此方法描述了任何时间点的视图，因此文本输入的值应始终为Untitled。

我找到的最简单的解决方案是将onChange={function(){}} 添加到inputs。

【讨论】：

我在这里添加我的 2c，以防其他人有同样的问题。如果您按规定做了所有事情，但仍然无法正常工作，请检查您的更改处理程序中是否有 e.preventDefault() 调用并将其删除。

【解决方案2】：

更新这样做的“反应方式”是将defaultChecked={true} 添加到所需的输入中。下面列出了其他方式。

我实际上也遇到了同样的情况。我所做的是在父 React 组件的componentDidMount lifecycle method 中找到input 标签，然后设置checked 属性。

如果我们谈论 vanilla JS，您可以使用 querySelector 找到第一个无线电输入。像这样：

var Form = React.createClass({
    componentDidMount: function(){
        this.getDOMNode().querySelector('[type="radio"]').checked = "checked";
    },
    render: function(){
        //your render here
    }
});

如果你使用 jQuery，可以这样做：

...
    $(this.getDOMNode()).find('[type="radio"]').eq(0).prop("checked", true);
...

【讨论】：

我还在另一个线程 (stackoverflow.com/questions/27750864/…) 中找到了更好的解决方案。只需在所需输入上说 defaultChecked={true} 即可完成所需的“反应方式”
在答案的底部它说“旁注：避免使用 defaultChecked/defaultValue 并使用 check/value 和 onChange 代替。”你看到了吗？
是的，我有。我还看到了来自 React 团队的console.info，上面写着警告：您在没有onChange 处理程序的情况下向表单字段提供了checked 道具。这将呈现一个只读字段。如果该字段应该是可变的，请使用defaultChecked。否则，设置onChange 或readOnly。
上周我遇到了类似的问题。在我的情况下，受控无线电组件的 checked 属性在单击时按预期更新（如 Chrome 中的 React 调试器所示），但我正在查看的复选框使用的是使用 CSS 创建的自定义无线电，令人惊讶的是，无线电有一个zIndex 设置为 -1 导致问题。

【解决方案3】：

我曾经遇到过类似的问题。

将defaultChecked 属性用于（且仅用于）第一次渲染，并提供一个onChange 函数来处理值更改。

我在这里找到了不同 input 类型的一个很好的例子：http://bl.ocks.org/insin/raw/082c0d88f6290a0ea4c7/

【讨论】：

【解决方案4】：

像这样使用defaultChecked：

<input type="radio" name="temperature" value="hot" defaultChecked={true}/> Hot
<input type="radio" name="temperature" value="warm" /> Warm

【讨论】：