<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 RefComponent extends React.Component {
onFocus() {
this.myInput.setAttribute("class", "highlight");
}
onBlur() {
this.myInput.setAttribute("class", "");
}
render() {
return (
<div>
<input
ref={input => {
this.myInput = input;
}}
onFocus={this.onFocus.bind(this)}
onBlur={this.onBlur.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(<React.Fragment><RefComponent/><RefComponent/><RefComponent/></React.Fragment>, document.getElementById('root'));
View Compiled
This Pen doesn't use any external CSS resources.