React UI Components Documentation

Determines whether the widget's value could be null.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        allowNull={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the input's number.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        decimal={2}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether jqxNumberInput is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Indicates the number of decimal places to use in numeric values.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        decimalDigits={3}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the char to use as the decimal separator in numeric values.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        decimalSeparator={','}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the digits in the input

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        digits={8}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the string that separates groups of digits to the left of the decimal in numeric values.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        groupSeparator={'.'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the number of digits in each group to the left of the decimal in numeric values.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        groupSize={2}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the input in pixels.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        height={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the input's mode.

'advanced'- the number input behavior resembles a masked input with numeric mask

'simple'-the  widget works as a normal textbox, but restricts the user's input to numbers

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        inputMode={'simple'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the input's minimum value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        min={2}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the input's maximum value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        max={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the string to use as negative symbol.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        negativeSymbol={'-'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the widget's place holder displayed when the widget's value is null.

Sets or gets the prompt char displayed when an editable char is empty.

'_'

'?'

';'

'#'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        promptChar={'#'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        rtl={true} spinButtons={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the readOnly state of the input.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        readOnly={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the spin mode.

'advanced'- the value is increased depending on the caret's position

'simple'-pecifies that the spin behavior is disabled

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        spinButtons={true} spinMode={'simple'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows or hides the spin buttons.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        spinButtons={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the width of the spin buttons.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        spinButtons={true} spinButtonsWidth={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the increase/decrease step.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        spinButtons={true} spinButtonsStep={10}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the string to use as currency or percentage symbol.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        symbol={'$'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the position of the symbol in the input.

'left'

'right'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        symbol={'@'} symbolPosition={'right'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the alignment.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        textAlign={'left'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the template as an alternative of the default styles.

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        spinButtons={true} template={'success'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        value={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the width of the input in pixels. Only positive values have effect.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
        width={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} onChange={this.onChange} 
       
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the textchanged event of jqxNumberInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} onTextchanged={this.onTextchanged} 
       
      />
    );
  }
 
  private onTextchanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered after value is changed.

Code examples

Bind to the valueChanged event of jqxNumberInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();  
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} onValueChanged={this.onValueChanged} 
       
      />
    );
  }
 
  private onValueChanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Clears the value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();
 
  public componentDidMount(): void {
    this.myNumberInput.current!.clear();
  }
   
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Destroys the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();
 
  public componentDidMount(): void {
    this.myNumberInput.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Focuses the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();
 
  public componentDidMount(): void {
    this.myNumberInput.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();
 
  public componentDidMount(): void {
    this.myNumberInput.current!.getDecimal();
  }
   
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();
 
  public componentDidMount(): void {
    this.myNumberInput.current!.setDecimal(200);
  }
   
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNumberInput, { INumberInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnumberinput';
 
class App extends React.PureComponent<{}, INumberInputProps> {
  private myNumberInput = React.createRef<JqxNumberInput>();
 
  public componentDidMount(): void {
    this.myNumberInput.current!.val();
  }
   
  
  public render() {
    return (
      <JqxNumberInput ref={this.myNumberInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);