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

Posted 2023-03-05

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

【英文标题】：HTML + React: Radio button stuck on the one initially set as "checked"

【发布时间】：2015-04-02 14:30:39

【问题描述】：

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

【问题讨论】：

你也应该分享你的反应组件代码。您可能正在使用反映 value 属性值而不是用户输入的受控组件：facebook.github.io/react/docs/forms.html#controlled-components

【参考方案1】：

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

引用Brandon's answer:

如果您将value=whatever 属性添加到输入，使其成为受控组件，那么如果您添加更新@987654326 值的onChange 处理程序，则它是只读的@。来自the React docs：

为什么选择受控组件？

在 React 中使用诸如 <input> 之类的表单组件带来了编写传统表单 HTML 时所没有的挑战。例如，在 HTML 中：

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

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

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

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

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

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

【讨论】：

我在这里添加我的 2c，以防其他人有同样的问题。如果您按规定做了所有事情，但仍然无法正常工作，请检查您的更改处理程序中是否有 e.preventDefault() 调用并将其删除。

【参考方案2】：

更新 这样做的“反应方式”是将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);
...

【讨论】：

我还在另一个线程 (***.com/questions/27750864/…) 中找到了更好的解决方案。只需在所需输入上说 defaultChecked=true 即可完成所需的“反应方式”

在答案的底部它说“旁注：避免使用 defaultChecked/defaultValue 并使用 check/value 和 onChange 代替。”你看到了吗？

是的，我有。我还看到了来自 React 团队的console.info，上面写着警告：您在没有onChange 处理程序的情况下向表单字段提供了checked 道具。这将呈现一个只读字段。如果该字段应该是可变的，请使用defaultChecked。否则，设置onChange 或readOnly。

上周我遇到了类似的问题。在我的情况下，受控无线电组件的 checked 属性在单击时按预期更新（如 Chrome 中的 React 调试器所示），但我正在查看的复选框使用的是使用 CSS 创建的自定义无线电，令人惊讶的是，无线电有一个zIndex 设置为 -1 导致问题。

【参考方案3】：

我曾经遇到过类似的问题。

将defaultChecked 属性用于（且仅用于）第一次渲染，并提供一个onChange 函数来处理值更改。

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

【参考方案4】：

像这样使用defaultChecked：

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