javascript HTML + React：单选按钮卡在最初设置为“已选中”的按钮上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28298163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML + React: Radio button stuck on the one initially set as "checked"
提问by Alexander Suraphel
I have a set of two radio buttons one of which is checked when the page is loaded. It appears that I can't change it to the second one. The HTML is build by reactjs if that matters. The markup on chrome looks like:
我有一组两个单选按钮，其中一个在页面加载时被选中。看来我不能把它改成第二个了。如果重要的话，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>
采纳答案by Alexander Suraphel
The reason for this was that React was making the inputs controlled components because the values for each input are set from the server side.
这样做的原因是 React 正在制作inputs 受控组件，因为每个输入的值都是从服务器端设置的。
Quoting from Brandon's answer:
引用布兰登的回答：
If you add a value={whatever}property to the input, which makes it a controlled component, thenit is read-only uness you add an onChangehandler that updates the value of whatever. From the React docs:
如果您value={whatever}向输入添加一个属性，使其成为受控组件，那么它是只读的，除非您添加一个onChange处理程序来更新 的值whatever。来自React 文档：
Why Controlled Components?
Using form components such as
<input>in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:<input type="text" name="title" value="Untitled" />This renders an input initializedwith the value,
Untitled. When the user updates the input, the node's value propertywill change. However,node.getAttribute('value')will still return the value used at initialization time,Untitled.Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:
render: function() { return <input type="text" name="title" value="Untitled" />; }Since this method describes the view at any point in time, the value of the text input should alwaysbe
Untitled.
为什么是受控组件？
<input>在 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。
The simplest solution I found is to add onChange={function(){}}to the inputs.
我找到的最简单的解决方案是添加onChange={function(){}}到inputs。
回答by skip405
update"the react way" of doing that is to add the defaultChecked={true}to the needed input. Other ways are listed below.
更新这样做的“反应方式”是将defaultChecked={true}加到所需的输入中。下面列出了其他方式。
I actually faced the same situation. What I did was to find the inputtag in the componentDidMountlifecycle methodof the parent React component and set the checkedattribute then.
我其实也遇到过同样的情况。我所做的是在父 React 组件input的componentDidMount生命周期方法中找到标签，checked然后设置属性。
If we speak about vanilla JS you can find the first radio input using querySelector. Like so:
如果我们谈论 vanilla JS，您可以使用querySelector找到第一个无线电输入。像这样：
var Form = React.createClass({
componentDidMount: function(){
this.getDOMNode().querySelector('[type="radio"]').checked = "checked";
},
render: function(){
//your render here
}
});
If you use jQuery, this can be done like this:
如果您使用 jQuery，则可以这样做：
...
$(this.getDOMNode()).find('[type="radio"]').eq(0).prop("checked", true);
...
回答by dearrrfish
I used to have similar problem.
我曾经有过类似的问题。
Use defaultCheckedprop for (and only for) first render, and give an onChangefunction to handle value changes.
将defaultCheckedprop 用于（且仅用于）首次渲染，并提供一个onChange函数来处理值更改。
I found a very good example for different inputtypes here: http://bl.ocks.org/insin/raw/082c0d88f6290a0ea4c7/
我在input这里找到了一个很好的不同类型的例子：http: //bl.ocks.org/insin/raw/082c0d88f6290a0ea4c7/
回答by Ricky
Use defaultCheckedlike so:
defaultChecked像这样使用：
<input type="radio" name="temperature" value="hot" defaultChecked={true}/> Hot
<input type="radio" name="temperature" value="warm" /> Warm
