React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

This React JS demo shows a Radio Button. With the RadioButton you can make a choice among a set of mutually exclusive, related options. Only one of the option can be chosen. Radio Buttons are most often used to choose between several mutually exclusive options.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        With the React RadioButton, users make a choice among a set of mutually exclusive, related options. Users can choose one and only one option.
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        With the React RadioButton, users make a choice among a set of mutually exclusive, related options. Users can choose one and only one option.
    </div>
    <div id="app"></div>
    <script src="../build/radiobutton_defaultfunctionality.bundle.js"></script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

import JqxButton from '../../../jqwidgets-react/react_jqxbuttons.js';

class App extends React.Component {
    componentDidMount() {
        this.refs.myButton.on('click', (event) => {
            document.getElementById('events').innerHTML = '<span>Button Clicked</span';
        });
        this.refs.mySubmitButton.on('click', (event) => {
            document.getElementById('events').innerHTML = '<span>Submit Button Clicked</span';
        });
        this.refs.myImageButton.on('click', () => {
            document.getElementById('events').innerHTML = '<span>Image Button Clicked</span';
        });
        this.refs.myTextImageButton.on('click', () => {
            document.getElementById('events').innerHTML = '<span>Text/Image Button Clicked</span';
            this.refs.myTextImageButton.setOptions({ textImageRelation: 'textBeforeImage', imgPosition: 'left', textPosition: 'center' });
        });
        this.refs.myHTMLButton.on('click', () => {
            document.getElementById('events').innerHTML = '<span>HTML Button Clicked</span';
            this.refs.myHTMLButton.value('<span style="font-style: italic;">Thanks for clicking me!</span>');
        });
    }
    render() {
        let marginTop = { marginTop: 20 };
        let eventsStyle = { fontSize: 12, fontFamily: 'Verdana', marginTop: 10 }
        return (
            <div>
                <div>
                    <JqxButton ref='myButton' value='Button' width={120} height={40} />
                </div>
                <div>
                    <JqxButton ref='mySubmitButton' style={marginTop} value='Submit' width={120} height={40} />
                </div>
                <div>
                    <JqxButton ref='myImageButton' style={marginTop}
                        width={120} height={40}
                        imgSrc={'../images/facebook.png'}
                    />
                </div>
                <div>
                    <JqxButton ref='myTextImageButton' style={marginTop} value='Button'
                        width={120} height={40} textImageRelation={'imageBeforeText'}
                        textPosition={'left'} imgSrc={'../images/twitter.png'}
                    />
                </div>
                <div>
                    <JqxButton ref='myHTMLButton' style={marginTop} value='<span style="font-weight: bold;">HTML Button</span>'
                        width={120} height={40}
                    />
                </div>
                <div>
                    <JqxButton style={marginTop} value='Disabled' width={120} height={40} disabled={true} />
                </div>
                <div style={eventsStyle}>
                    <div>Events:</div>
                    <div id='events'></div>
                </div>
            </div>
        )
    }
};

ReactDOM.render(<App />, document.getElementById('app'));