How to use radio buttons in ReactJS?
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 ( <tbody> <tr> <td><input type="radio" name="site_name" value={result.SITE_NAME} checked={this.state.site === result.SITE_NAME} onChange={this.onSiteChanged} />{result.SITE_NAME}</td> <td><input type="radio" name="address" value={result.ADDRESS} checked={this.state.address === result.ADDRESS} onChange={this.onAddressChanged} />{result.ADDRESS}</td> </tr> </tbody> ); }, this); return ( <table className="table"> <thead> <tr> <th>Name</th> <th>Address</th> </tr> </thead> {resultRows} <tfoot> <tr> <td>chosen site name {this.state.site} </td> <td>chosen address {this.state.address} </td> </tr> </tfoot> </table> ); }});
Here is a simplest way of implementing radio buttons in react js.
class App extends React.Component { setGender(event) { console.log(event.target.value); } render() { return ( <div onChange={this.setGender.bind(this)}> <input type="radio" value="MALE" name="gender"/> Male <input type="radio" value="FEMALE" name="gender"/> Female </div> ) }}ReactDOM.render(<App/>, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="app"></div>Edited
You can use arrow function instead of binding. Replace the above code as
<div onChange={event => this.setGender(event)}>
For a default value use defaultChecked, like this
<input type="radio" value="MALE" defaultChecked name="gender"/> Male
Based on what React Docs say:
Handling Multiple Inputs. When you need to handle multiple controlled input elements, you can add a name attribute to each element and let the handler function choose what to do based on the value of event.target.name.
For example:
class App extends React.Component { constructor(props) { super(props); this.state = {}; } handleChange = e => { const { name, value } = e.target; this.setState({ [name]: value }); }; render() { return ( <div className="radio-buttons"> Windows <input id="windows" value="windows" name="platform" type="radio" onChange={this.handleChange} /> Mac <input id="mac" value="mac" name="platform" type="radio" onChange={this.handleChange} /> Linux <input id="linux" value="linux" name="platform" type="radio" onChange={this.handleChange} /> </div> ); }}Link to example: https://codesandbox.io/s/6l6v9p0qkr
At first, none of the radio buttons is selected so this.state is an empty object, but whenever the radio button is selected this.state gets a new property with the name of the input and its value. It eases then to check whether user selected any radio-button like:
const isSelected = this.state.platform ? true : false;EDIT:
With version 16.7-alpha of React there is a proposal for something called hooks which will let you do this kind of stuff easier:
In the example below there are two groups of radio-buttons in a functional component. Still, they have controlled inputs:
function App() { const [platformValue, plaftormInputProps] = useRadioButtons("platform"); const [genderValue, genderInputProps] = useRadioButtons("gender"); return ( <div> <form> <fieldset> Windows <input value="windows" checked={platformValue === "windows"} {...plaftormInputProps} /> Mac <input value="mac" checked={platformValue === "mac"} {...plaftormInputProps} /> Linux <input value="linux" checked={platformValue === "linux"} {...plaftormInputProps} /> </fieldset> <fieldset> Male <input value="male" checked={genderValue === "male"} {...genderInputProps} /> Female <input value="female" checked={genderValue === "female"} {...genderInputProps} /> </fieldset> </form> </div> );}function useRadioButtons(name) { const [value, setState] = useState(null); const handleChange = e => { setState(e.target.value); }; const inputProps = { name, type: "radio", onChange: handleChange }; return [value, inputProps];}Working example: https://codesandbox.io/s/6l6v9p0qkr