HTML + React：单选按钮停留在最初设置为“已选中”的那一个上

Question

我有两个单选按钮，一组在加载页面时被选中。看来我无法将其更改为第二个。如果需要的话，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>

Answer 1

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

引用布兰登的答案：

如果您value={whatever}在输入中添加一个属性，使其成为受控组件， 那么 除非您添加一个onChange用于更新的值的处理程序，
否则 它是只读的whatever。从React
docs
：

为什么使用受控组件？

<input>在React中使用表单组件（例如在React中）提出了在编写传统表单HTML时不存在的挑战。例如，在HTML中：

<input type="text" name="title" value="Untitled" />

这将呈现一个以值 初始化 的输入Untitled。当用户更新输入时，节点的value 属性
将更改。但是，node.getAttribute('value')仍会返回初始化时使用的值Untitled。

与HTML不同，React组件必须在任何时间点（不仅在初始化时）代表视图的状态。例如，在React中：

render: function() {
  return <input type="text" name="title" value="Untitled" />;
}

由于此方法在任何时间点都描述了视图，因此文本输入的值应 始终 为Untitled。

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