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组件的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);
...

Answer 2

我曾经有类似的问题。

使用defaultChecked prop（仅适用于）首次渲染，并提供onChange函数来处理值更改。

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

Answer 3

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

引自Brandon's answer：

如果向输入中添加value={whatever}属性，使其成为受控组件，则然后它是只读的，您可以添加onChange处理程序来更新值whatever。来自the React docs：

为何选择受控制的组件？

在React中使用<input>等表单组件提出了在编写传统表单HTML时不存在的挑战。例如，在HTML中：
<input type="text" name="title" value="Untitled" />
这将使用值Untitled呈现输入已初始化。当用户更新输入时，节点的值属性将更改。但是，node.getAttribute('value')仍将返回初始化时使用的值Untitled。

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

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

Answer 4

像这样使用defaultChecked：

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

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

4 个答案: