Add or Remove the value programatically on read only TextBox in React TextBox component

21 Oct 20245 minutes to read

You can programatically add or remove the value to the readonly TextBox.

In this sample, click the update value button to fill the read-only TextBox with value and float a label.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
export default class Default extends React.Component {
    textBoxObj = React.createRef();
    render() {
        return (<div className="wrap">
        <div className="row">
            <TextBoxComponent
                id='default'
                placeholder="Enter value"
                floatLabelType="Auto"
                ref={this.textBoxObj}
                readOnly="true"
            />
        </div>
        <div className="row">
            <button className="e-btn update_value" id="valuebtn" onClick={this.updateBtnClick} ref={btn => this.valueBtn = btn}>Set value</button>
            <button className="e-btn remove_value" id="removebtn" onClick={this.removeBtnClick} ref={removeBtn => this.removeBtn = removeBtn}>Remove value</button>
        </div>
    </div>);
    }
    updateBtnClick = () => {
        this.textBoxObj.current.value = '10';
    };
    removeBtnClick = () => {
        this.textBoxObj.current.value = '';
    };
}
ReactDOM.render(<Default />, document.getElementById('input-container'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
export default class Default extends React.Component {
  public textBoxObj = React.createRef();
  public render() {
    return (
      <div className="wrap">
        <div className="row">
          <TextBoxComponent
            id="default"
            placeholder="Enter value"
            floatLabelType="Auto"
            ref={this.textBoxObj}
            readOnly="true"
          />
        </div>
        <div className="row">
          <button
            className="e-btn update_value"
            id="valuebtn"
            onClick={this.updateBtnClick}
          >
            Set value
          </button>
          <button
            className="e-btn remove_value"
            id="removebtn"
            onClick={this.removeBtnClick}
          >
            Remove value
          </button>
        </div>
      </div>
    );
  }
  public updateBtnClick = () => {
    (this.textBoxObj as any).current.value = '10';
  };
  public removeBtnClick = () => {
    (this.textBoxObj as any).current.value = '';
  };
}

ReactDOM.render(<Default />, document.getElementById('input-container'));