React UI Components Documentation

ReactJS TextArea Component

The TextArea component for ReactJS represents a textarea widget with auto-complete capabilities.

Prerequisites

Refer to ReactJS Getting Started before you start with this help topic.

Configuration

The TextArea component for ReactJS requires the following imports.

 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';

Then we create our component class. Properties and methods are put as ReactJS props.

  
class App extends React.Component {
  render () {
    let quotes = [];
    quotes.push('Life is a dream for the wise, a game for the fool, a comedy for the rich, a tragedy for the poor.');
    quotes.push('Yesterday is not ours to recover, but tomorrow is ours to win or lose.');
    quotes.push('It does not matter how slowly you go as long as you do not stop.');
    quotes.push('Success depends upon previous preparation, and without such preparation there is sure to be failure.');
    quotes.push('Better a diamond with a flaw than a pebble without.');
    quotes.push('To succeed in life, you need two things: ignorance and confidence.');
    quotes.push('A successful man is one who can lay a firm foundation with the bricks others have thrown at him.');
    quotes.push('Sleep is the best meditation.'); 
    return (
        <JqxTextArea
            width={300} height={90} source={quotes}
            minLength={1} placeHolder={'Enter a sentence'}
        />
    )
  }
}

Finally we render our class in the desired HTML element:

 
ReactDOM.render(<App />, document.getElementById('app'));

Events Methods & Properties

In order to bind to any event, change any property or call any method, we need a reference to the component.
For that we use the ReactJS "ref" Callback Attribute:

 
<JqxTextArea ref='myTextArea' width={300} height={90}...../>

Now, when we have a reference, we need to call the desired event/property/method.
This is done in the componentDidMount() ReactJS Component Lifecycle method.

 
class App extends React.Component {
  componentDidMount()
  {
     //your logic
  }
  render ()
  {
    return
    (
      ....
    )
  }
};

Events

The open event is triggered when the auto-suggest popup is opened.

The following example demonstrates how to add an event listener:

 
componentDidMount ()
{
 
  this.refs.myTextArea.on('open', (event) =>
  {
     //your logic
  });
 
}

Methods & Properties

This is how you call methods & props:

 
//Get Methods
let value = this.refs.myTextArea.val();
 
//Set Methods
this.refs.myTextArea.val('New Value');
 
//Get Properties
let height = this.refs.myTextArea.height();
 
//Set Properties
this.refs.myTextArea.height(50);

Every component have a method setOptions which accepts a object as an argument. This object contains component settings.

 
this.refs.myTextArea.setOptions({
    opened: true, width: 300, height: 150
})

Every component also have a method getOptions which returns a object containing the component settings.

 
let options = this.refs.myTextArea.getOptions();

TextArea Examples

Overview

The following example demonstrates how to create a TextArea component.

Disabled TextArea

The following example demonstrates how to disable the TextArea component.

 
import React from 'react';
import ReactDOM from 'react-dom';
  
import JqxTextArea from 'jqwidgets-react/react_jqxtextarea.js';
 
class App extends React.Component {
  render () {
    return (
        <JqxTextArea
            disabled={true}
            width={300} height={90}
            placeHolder={'Enter a sentence'}
        />
    )
  }
}
  
ReactDOM.render(<App />, document.getElementById('app'));

TextArea API

API Reference of the jQWidgets TextArea component for React: TextArea API