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

更新 "做出反应的方式"是添加defaultChecked={true}到所需的输入.其他方式如下.

我实际上遇到了同样的情况.我所做的是在父React组件input的componentDidMount生命周期方法中找到标记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);
...

Answer 2

我曾经有类似的问题.

使用defaultCheckedprop(仅用于)首次渲染,并提供onChange处理值更改的函数.

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

Answer 3

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

引用布兰登的回答：

如果您value={whatever}向输入添加一个属性，使其成为受控组件，那么onChange如果您添加一个更新 值的处理程序，它就是只读的whatever。来自反应文档：

为什么要控制组件？

使用 React 等表单组件<input>会带来编写传统表单 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(){}}到inputs.