snippethtmlreactCritical
How to use radio buttons in ReactJS?
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
In jQuery I could do something like
But surely there must be a Reactjs way, which I am totally missing? Many Thanks
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
So here I register the event of the input, and then change the
jsbin
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.