Implementing radio list with text input in React js

Question

I am implementing a form in React js which does the following:

Fetches some content from the server.
Shows the content in the form of radio list.
Allow the user to add their own field if they do not want to select from any of the provided radio lists (Add their own text input).

Any one of these should be selected at any time

I am really new to React js, but I have read about the controlled components React deals with but I am not able to think of anything that can help my case.

Let me present my code first:

var OrderForm = React.createClass({

    render: function(){

        return (
            <div className="panel panel-default">
                    <div className="panel-heading">
                         Hi, {userObject.attributes.Name}
                    </div>
                    <div className="panel-body">
                            <div className="well well-sm">
                                 Choose your delivery address
                            </div>

                        <form>                           
                                 {
                                     addressArray.map(function(c){

                                         return <div className="radio">
                                                <label>
                                                <input type="radio" />
                                                    {c}
                                                </label>
                                                </div>

                                     })

                                 }
                                <br/>
                            <div className="well well-sm">
                                Or add a new one
                                </div>

                            <div className="input-group">
                                    <span className="input-group-addon">
                                    <input type="radio" aria-label="..." />
                                    </span>
                                         <input type="text" className="form-control" aria-label="..." />
                             </div>

                        </form>

        </div>
        </div>

        );

    }
});

addressArray is an array that has the string contents that are rendered as radio list.

My question is:

How do I make sure that only one of the radio buttons is selected at a time in React js? Also, how do I get the value of what has been submitted?

I am thinking of using bind method for every radio list rendered, but I don't really know what to put inside it. Is it possible for every list item to maintain a state of its own?

Any help? Thanks.

Alexandre Kirszenberg · Accepted Answer · 2015-06-10 10:30:09Z

You just need to store the index of the currently selected item in the state of your OrderForm component.

var OrderForm = React.createClass({
    getInitialState: function() {
        return {
            selectedItemIdx: null,
        };
    },

    _handleChange: function(idx) {
        this.setState({
            selectedItemIdx: idx,
        });
    },

    _handleSubmit: function(e) {
        e.preventDefault();
        e.stopPropagation();
        console.log(this.state.selectedItemIdx);
    },

    render: function() {
        return (
            <form onSubmit={this._handleSubmit}>
                {addressArray.map(function(address, idx) {
                    return (
                        <input
                            key={idx}
                            type="radio"
                            checked={this.state.selectedItemIdx === idx}
                            onChange={this._handleChange.bind(null, idx)}
                        />
                    );
                }, this)}
            </form>
        );
    },
});

You can them retrieve the index of the currently selected item in your component via this.state.selectedItemIdx.

Collectives™ on Stack Overflow

Implementing radio list with text input in React js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related