<div id="root"></div>
input {
padding: 10px;
border: solid 2px #BDC7D8;
display: block;
width: 500px;
margin-top:10px;
}
.highlight {
border: solid 2px #0000FF;
background-color:#e5e5e5;
}
class IdComponent extends React.Component {
onFocus() {
document.getElementById("myInput").setAttribute("class", "highlight");
}
onBlur() {
document.getElementById("myInput").setAttribute("class", "");
}
render() {
return (
<div>
<input
id="myInput"
onFocus={this.onFocus.bind(this)}
onBlur={this.onBlur.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(<IdComponent/>, document.getElementById('root'));
View Compiled
This Pen doesn't use any external CSS resources.