Methods in React TextArea Component

21 Feb 20268 minutes to read

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

FocusIn method

The focusIn method programmatically sets focus to the textarea element, enabling user interaction via keyboard or other input methods.

index.jsx

// 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'));

index.tsx

// 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 removes focus from the textarea element, ending user interaction. Use this method to programmatically remove focus after completing a task or when navigating to another element.

index.jsx

// 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'));

index.tsx

// 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 retrieves properties needed for persistence state. It returns an object containing configuration options and state information to maintain across sessions.

index.jsx

// 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'));

index.tsx

// 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'));