Having trouble getting help?
Contact Support
Contact Support
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'));