<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react/umd/react.development.js
  2. https://unpkg.com/react-dom/umd/react-dom.development.js