HTML + React：单选按钮卡在最初设置为“已检查”的单选按钮上。 [英] HTML + React: Radio button stuck on the one initially set as "checked"

问题描述

我有一组两个单选按钮，其中一个在页面加载时被检查。看来我不能将它改为第二个。如果有问题的话，HTML是通过reactjs构建的。 chrome上的标记看起来像：

 < fieldset data-reactid =。0.0.0.0.0.0.1> 
< label for =coop-radio-btndata-reactid =。0.0.0.0.0.0.1.0> 
< span data-reactid =。0.0.0.0.0.0.1.0.0>致合作社< / span> 
将输入类型= 无线电 名称= requestOnBehalfOf 值= COOP ID = COOP-RADIO-BTN 数据reactid = GT 0.0.0.0.0.0.1.0.1\" 。; 
< / label> 
< label for =union-radio-btndata-reactid =。0.0.0.0.0.0.1.1> 
< span data-reactid =。0.0.0.0.0.0.1.1.0>其他请求< / span> 
 < / label> 
< / fieldset> 
  

解决方案

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

从Brandon的回答：

如果您添加值= {whatever} 属性到输入，这使得它成为一个受控组件，然后它是只读的，你添加一个 onChange 处理程序，它更新任何的值。从的阵营文档：

为什么使用控制组件？ 使用$ $ b

React中的c $ c>< input> 提供了一个在编写传统表单HTML时不存在的挑战。例如，在HTML中：

 < input type =textname =titlevalue =Untitled/> ; 
  

这会使输入初始化，其值为无标题。当用户更新输入时，节点的值属性将改变。但是， node.getAttribute（'value'）仍然会返回初始化时使用的值， Untitled p>

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

  render：function（）{
 return< input type =textname =titlevalue =无标题/> ;; 
 
 
 
 
 
 $ b 
由于此方法在任何时间点描述视图，文本输入应始终为无标题。
 
 

我找到的最简单的解决方案是向输入 s添加 onChange = {function（）{}} p>


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:

<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>

解决方案

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.

Quoting from Brandon's answer:

If you add a value={whatever} property to the input, which makes it a controlled component, then it is read-only uness you add an onChange handler that updates the value of whatever. From the React docs:

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 initialized with the value, Untitled. When the user updates the input, the node's value property will 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 always be Untitled.

The simplest solution I found is to add onChange={function(){}} to the inputs.

这篇关于HTML + React：单选按钮卡在最初设置为“已检查”的单选按钮上。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！