React UI Components Documentation

Sets or gets the disabled property.

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

Sets or gets the height property.

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

Sets or gets the mask property.

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

Sets or gets the promptChar property.

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

Sets or gets the readOnly property.

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

Sets or gets the rtl property.

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

Sets or gets the theme property.

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

Sets or gets the textAlign property.

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

Sets or gets the value property.

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

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxMaskedInput from 'jqwidgets-react/react_jqxmaskedinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxMaskedInput ref='myMaskedInput'
                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 jqxMaskedInput.

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

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

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxMaskedInput.

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

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

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

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

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

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

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

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

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

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