React ComplexInput API Reference

Name	Type	Default
decimalNotation	ComplexInputDecimalNotation	'default'
ComplexInputDecimalNotation: "default" \| "exponential" \| "scientific" \| "engineering" Sets or gets the notation in which to display the real and imaginary parts of the complex number. Possible Values: `'default'` - decimal notation, e.g. '330000 - 200i' `'exponential'`, e.g. '3.3e+5 - 2e+2i' `'scientific'`, e.g. '3.3x10³ - 2x10²i' `'engineering'`, e.g. '330x10³ - 200x10^oi' /* 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);
disabled	boolean	false
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);
height	string \| number	null
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);
placeHolder	string	''
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);
roundedCorners	boolean	true
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);
rtl	boolean	false
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);
spinButtons	boolean	false
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);
spinButtonsStep	number	1
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);
template	ComplexInputTemplate	'default'
ComplexInputTemplate: "default" \| "primary" \| "success" \| "warning" \| "danger" \| "info" Determines the template as an alternative of the default styles. Possible Values: `'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);
theme	string	''
/* 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);
value	string	''
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);
width	string \| number	null
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);
Events
change	Event
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);
Methods
Name	Arguments	Return Type
destroy	None
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);
getDecimalNotation	part, decimalNotation
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);
getReal	complexnumber
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);
getImaginary	complexnumber
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);
render	None
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);
refresh	None
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);
val	value
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);

Properties

Events

Code examples

Methods