React UI Components Documentation

Sets or gets the allowNull property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} allowNull={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the decimal property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} decimal={2}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the decimalDigits property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} decimalDigits={3}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the decimalSeparator property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} decimalSeparator={','}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the digits property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} digits={8}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the groupSeparator property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} groupSeparator={'.'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the groupSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} groupSize={2}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the inputMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} inputMode={'simple'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the min property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} min={2}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the max property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} max={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the negativeSymbol property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} negativeSymbol={'-'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the placeHolder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} placeHolder={'Null Value'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the promptChar property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} promptChar={'#'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the readOnly property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} readOnly={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the spinMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} spinMode={'advanced'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the spinButtons property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} spinButtons={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the spinButtonsWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} spinButtons={true} spinButtonsWidth={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the spinButtonsStep property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} spinButtons={true} spinButtonsStep={10}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the symbol property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} symbol={'$'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the symbolPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} symbol={$} symbolPosition={'right'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the textAlign property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} textAlign={'right'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the template property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} template={'success'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the value property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25} value={100}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the value is changed and the control's focus is lost.

Code examples

Bind to the change event of jqxNumberInput.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNumberInput.on('change', (event) => {
            // Do Something...
        });
    }

    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user entered entered a text.

Code examples

Bind to the textchanged event of jqxNumberInput.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNumberInput.on('textchanged', (event) => {
            // Do Something...
        });
    }

    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered after value is changed.

Code examples

Bind to the valueChanged event of jqxNumberInput.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNumberInput.on('valueChanged', (event) => {
            // Do Something...
        });
    }

    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNumberInput.clear();
    }

    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNumberInput.destroy();
    }

    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNumberInput.focus();
    }

    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myNumberInput.getDecimal();
    }

    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNumberInput.setDecimal(1);
    }

    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNumberInput from 'jqwidgets-react/react_jqxnumberinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myNumberInput.val(12);
    }

    render() {          
        return (
            <JqxNumberInput ref='myNumberInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));