HiveBrain v1.2.0
Get Started
← Back to all entries
snippethtmlreactCritical

How to use radio buttons in ReactJS?

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
usebuttonsreactjsradiohow

Problem

I am new to ReactJS, sorry if this sounds off. I have a component that creates several table rows according to the received data.

Each cell within the column has a radio checkbox. Hence the user can select one site_name and one address from the existing rows. The selection shall be shown in the footer. And thats where I am stuck.
var SearchResult = React.createClass({
render: function () {
var resultRows = this.props.data.map(function (result) {
return (




{result.SITE_NAME}




{result.ADDRESS}




);
});
return (



Name
Address


{resultRows}


chosen site name ????
chosen address ?????



);
},
});


In jQuery I could do something like $("input[name=site_name]:checked").val() to get the selection of one radio checkbox type and insert it into the first footer cell.

But surely there must be a Reactjs way, which I am totally missing? Many Thanks

Solution

Any changes to the rendering should be change via the state or props (react doc).

So here I register the event of the input, and then change the state, which will then trigger the render to show on the footer.
var SearchResult = React.createClass({
getInitialState: function () {
return {
site: '',
address: '',
};
},
onSiteChanged: function (e) {
this.setState({
site: e.currentTarget.value,
});
},

onAddressChanged: function (e) {
this.setState({
address: e.currentTarget.value,
});
},

render: function () {
var resultRows = this.props.data.map(function (result) {
return (




{result.SITE_NAME}



{result.ADDRESS}



);
}, this);
return (



Name
Address


{resultRows}


chosen site name {this.state.site}
chosen address {this.state.address}



);
},
});


jsbin

Context

Stack Overflow Q#27784212, score: 304

Revisions (0)

No revisions yet.