如何在 React 中使用单选按钮？

Posted 2023-02-22

【中文标题】如何在 React 中使用单选按钮？

【英文标题】：How do I use radio buttons in React?

【发布时间】：2015-06-24 00:03:26

【问题描述】：

我正在制作一个表格，我需要一个无线电输入。如何在 onSubmit 函数中获取选中的无线电输入，正确的方法是什么？

这是我的代码，我的 myRadioInput 变量在我提交时包含选项 A 或选项 B：

React.createClass(
    handleSubmit: function() 
        e.preventDefault();
        var myTextInput = this.refs.myTextInput.getDOMNode().value.trim();
        var myRadioInput = "How ?";
    ,
    render: function() 
        return (
            <form onSubmit=this.handleSubmit>
                <input type="text" ref="myTextInput" />
                <label>
                    <span>Option A</span>
                    <input type="radio" name="myRadioInput" value="Option A"/>
                </label>
                <label>
                    <span>Option B</span>
                    <input type="radio" name="myRadioInput" value="Option B"/>
                </label>
                <input type="submit" value="Submit this"/>
            </form>
        )
    
);

【问题讨论】：

How to use radio buttons in ReactJS?的可能重复

【参考方案1】：

如果您确保所有表单元素都具有name 属性，则可以使用form.elements 从表单onSubmit 中提取数据：

handleSubmit: function(e) 
  e.preventDefault()
  var form = e.target
  var myTextInput = form.elements.myTextInput.value
  var myRadioInput = form.elements.myRadioInput.value
  // ...

在现代浏览器中，form.elements.myRadioInput 应该是一个 RadioNodeList，它有一个与所选值相对应的 .value，但是当不支持时，你会得到一个必须迭代的节点的 NodeList 或 htmlCollection找到选定的值。

---

我还有一个可重用的 React 组件 - <AutoForm> - 它为您使用从 form.elements 提取数据的通用实现。我在下面的sn-p中使用过：

<meta charset="UTF-8">
<script src="http://fb.me/react-0.13.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
<script src="https://cdn.rawgit.com/insin/react-auto-form/master/dist/react-auto-form.js"></script>
<div id="app"></div>
<script type="text/jsx;harmony=true">void function()  "use strict";
 
var Example = React.createClass(
    getInitialState() 
        return submittedData: null
    ,

    handleSubmit(e, submittedData) 
        e.preventDefault()
        this.setState(submittedData)
    ,

    render() 
        return <div>
            <AutoForm onSubmit=this.handleSubmit>
                <input type="text" name="myTextInput" />
                <label>
                    <span>Option A</span>
                    <input type="radio" name="myRadioInput" value="Option A"/>
                </label>
                <label>
                    <span>Option B</span>
                    <input type="radio" name="myRadioInput" value="Option B"/>
                </label>
                <input type="submit" value="Submit this"/>
            </AutoForm>
            this.state.submittedData && <pre>
              JSON.stringify(this.state.submittedData, null, 2)
            </pre>
        </div>
    
);
 
React.render(<Example/>, document.getElementById('app'))
 
()</script>

【讨论】：

onSubmit 事件上的 e.target.elelments.myRaidoButton.value 属性正是我所需要的。 +1 因为不必设置一堆事件处理程序并手动跟踪选择了哪个单选按钮的状态。

同意@Jeremy。这个答案是我需要的。我很高兴知道有 valueLink 解决方案，这很有趣，但这对我来说似乎更标准。

【参考方案2】：

您不应该使用 refs 来访问 DOM 节点并检查它们的值。相反，您应该将输入值链接到组件状态的属性。

以下是一些如何做到这一点的示例：https://facebook.github.io/react/docs/two-way-binding-helpers.html

【讨论】：

谢谢，但我不同意在开发不需要实时验证的简单表单时必须更新状态。将所有内容都放在一个提交处理程序中使组件变得更加简单，而且我不需要担心混入或状态。

我不同意，但没关系。

@andersem 如果您使用状态，这将是微不足道的。即使在并不真正需要它的情况下使用它的动机是，它可以很容易地根据不断变化的需求进行更改。

我现在似乎同意了:)

但是检查event.target.value 和使用refs.input.value 不一样吗？

【参考方案3】：

     items.map(item => 
    <span id="qn" key=item.qno>item.qno</span>
    )

     items.map(item => 
    <span id="qd" key=item.qno>item.question<br/>
    <br/>
  <input onClick=this.captureClick type="radio" value="1" checked=this.state.option === "1"
        onChange=this.handleChange/>
     item.options.map(option => 
    <span id="op" key=option.option1>
    option.option1</span>
    )<br/>
   <br/> <input onClick=this.captureClick type="radio" value="2" checked=this.state.option === "2"
        onChange=this.handleChange />
     item.options.map(option => 
    <span id="op" key=option.option2>
    option.option2</span>
    )<br/><br/>
    <input onClick=this.captureClick type="radio" value="3" checked=this.state.option === "3"
        onChange=this.handleChange />
     item.options.map(option => 
    <span id="op" key=option.option3>
    option.option3</span>
    )<br/><br/>

    <input onClick=this.captureClick type="radio" value="4" checked=this.state.option === "4"
        onChange=this.handleChange />

     item.options.map(option => 
    <span id="op" key=option.option4>option.option4</span>
    )<br/><br/>
  <button type="submit" className="save" onClick=this.onSave>SAVE</button>  
  
    </span>

你也可以像这样使用单选按钮

【讨论】：

一些上下文/解释会很有帮助，因为只有代码答案往往难以理解。

肯定......我仍在处理这个例子，并在我们点击这些单选按钮时尝试将一些值存储到数据库......！

【参考方案4】：

我将此解决方案用于单选按钮与活动的两种方式绑定：

内部 render() 方法：

const items = [
    label: 'one', checked: false,
    label: 'two', checked: true,
    label: 'three', checked: true
];

items.map((item, index) => (
    <div className=`radioItem (item.checked) ? 'active' : ''`>
        <label>
            item.label
            <input type="radio"
                   name="address"
                   value=item.label
                   onClick=(e)=>
                       $('.radioItem').filter('.active').removeClass('active');
                       $(e.currentTarget).closest('.radioItem').addClass('active');
                   
                   ref=elm => $(elm).prop('checked', item.checked)
            />
        </label>
    </div>
))