Methods in React TextArea Component

25 Mar 20248 minutes to read

This section outlines the methods available for interacting with the TextArea component.

FocusIn method

The focusIn method in the TextArea, is used to set focus to the textarea element, enabling user interaction.

By calling the focusIn method, you can programmatically set focus to the TextArea component, allowing users to interact with it via keyboard input or other means.

// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render TextArea.
function App() {
    let textareaInstance;

    function onButtonClick() {
        // use focusIn method to focus TextArea
        textareaInstance.focusIn();
    }

    return (
        <div className='wrap'>
            <TextAreaComponent id='default' ref={(scope) => { textareaInstance = scope }}></TextAreaComponent>
            <br/>
            <button id="button" onClick={onButtonClick}>Focus-in</button>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('input-container'));
// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render TextArea.
function App() {
    let textareaInstance;

    function onButtonClick() {
        // use focusIn method to focus TextArea
        textareaInstance.focusIn();
    }

    return (
        <div className='wrap'>
            <TextAreaComponent id='default' ref={(scope) => { textareaInstance = scope }}></TextAreaComponent>
            <br/>
            <button id="button" onClick={onButtonClick}>Focus-in</button>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));

FocusOut method

The focusOut method in the TextArea component is used to remove focus from the textarea element, ending user interaction.
This method is beneficial for scenarios where user need to programmatically remove focus from the TextArea component, such as after completing a specific task or when navigating to another element in the application.

// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render TextArea.
function App() {
    let textareaInstance;

    function onButtonClick() {
        // use focusOut method to remove focus from the TextArea
        textareaInstance.focusOut();
    }

    return (
        <div className='wrap'>
            <TextAreaComponent id='default' ref={(scope) => { textareaInstance = scope }}></TextAreaComponent>
            <br/>
            <button id="button" onClick={onButtonClick}>Focus-Out</button>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('input-container'));
// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render TextArea.
function App() {
    let textareaInstance;

    function onButtonClick() {
        // use focusOut method to remove focus from the TextArea
        textareaInstance.focusOut();
    }

    return (
        <div className='wrap'>
            <TextAreaComponent id='default' ref={(scope) => { textareaInstance = scope }}></TextAreaComponent>
            <br/>
            <button id="button" onClick={onButtonClick}>Focus-Out</button>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));

GetPersistData method

The getPersistData method in the TextArea component retrieves the properties that need to be maintained in the persisted state.
This method returns an object containing the properties to be persisted, which can include various configuration options and state information of the TextArea component.

// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render TextArea.
function App() {
    let textareaInstance;

    function onButtonClick() {
        // use getPersistData method in TextArea
        textareaInstance.getPersistData();
    }

    return (
        <div className='wrap'>
            <TextAreaComponent id='default' ref={(scope) => { textareaInstance = scope }}></TextAreaComponent>
            <br/>
            <button id="button" onClick={onButtonClick}>Get Persist-data</button>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('input-container'));
// Import the TextArea.
import { TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render TextArea.
function App() {
    let textareaInstance;

    function onButtonClick() {
        // use getPersistData method in TextArea
        textareaInstance.getPersistData();
    }

    return (
        <div className='wrap'>
            <TextAreaComponent id='default' ref={(scope) => { textareaInstance = scope }}></TextAreaComponent>
            <br/>
            <button id="button" onClick={onButtonClick}>Get Persist-data</button>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('input-container'));