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或{ {1}}必须迭代的节点才能找到所选的值。

我还有一个可重用的React组件 - <AutoForm> - 它使用HTMLCollection的通用数据提取实现。我在下面的代码段中使用过它：

form.elements

Answer 2

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

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

Answer 3

我将此解决方案用于单选按钮双向绑定活动：

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

Answer 4

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

您也可以使用“单选”按钮

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

4 个答案: