React UI Components Documentation

Sets or gets the notation in which to display the real and imaginary parts of the complex number.

'default' - decimal notation, e.g. '330000 - 200i'

'exponential', e.g. '3.3e+5 - 2e+2i'

'scientific', e.g. '3.3x103 - 2x102i'

'engineering', e.g. '330x103 - 200x10oi'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} decimalNotation={'exponential'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the jqxComplexInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxComplexInput's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxComplexInput's placeholder.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} placeHolder={'Enter a complex number'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} roundedCorners={false}
      />
    );
  }
}
 
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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows or hides the spin buttons.

Note: the spin buttons require an additional empty div element in the initialization div of jqxComplexInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} spinButtons={true}
      />
    );
  }
}
 
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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} spinButtons={true} spinButtonsStep={10}
      />
    );
  }
}
 
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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} template={'primary'}
      />
    );
  }
}
 
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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the value of the jqxComplexInput widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'190 - 17i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxComplexInput's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxComplexInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} onChange={this.onChange} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Method: getDecimalNotation

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.getDecimalNotation();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the real part of the entered number.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.getReal();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the imaginary part of the entered number.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.getImaginary();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.render();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refreshes the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.val();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);