How do I use radio buttons in React?

I’m making a form, and I was in need of a radio input. How do I get the checked radio input in a onSubmit-function, what is the correct way?

This is my code, I myRadioInput-variable to contain either Option A or Option B when I submit:

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>
        )
    }
});

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

If you make sure all your form elements have name attributes, you can extract data from the form onSubmit using form.elements:

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

In modern browsers, form.elements.myRadioInput should be a RadioNodeList which has a .value corresponding to the selected value, but when that’s not supported you will get a NodeList or HTMLCollection of nodes which must be iterated over to find the selected value.

I also have a reusable React component – <AutoForm> – which uses a generic implementation of data extraction from form.elements for you. I’ve used it in the snippet below:

<meta charset="UTF-8">
<script src="https://fb.me/react-0.13.1.js"></script>
<script src="https://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>

Method 2

You shouldn’t use refs to get access to DOM nodes and inspect their value. Instead you should link the inputs value to a property on the component state.

Here are some examples of how to do it: https://facebook.github.io/react/docs/two-way-binding-helpers.html

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

You can use Radio button’s like this also

Method 4

i use this solution for radio button two way binding with active :

inside render() method:

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x