<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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