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

Question

我正在制作一个表格,我需要收音机输入.如何在onSubmit函数中获取已检查的无线电输入,正确的方法是什么？

这是我的代码,我myRadioInput-variable在提交时包含选项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>
        )
    }
});

Answer 1

如果确保所有表单元素都具有name属性,则可以onSubmit使用form.elements以下方法从表单中提取数据:

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.我在下面的代码段中使用过它:

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

Answer 2

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

以下是如何执行此操作的一些示例:https://facebook.github.io/react/docs/two-way-binding-helpers.html