当用户单击输入时如何聚焦输入？

我尝试在 react.js 中创建一个搜索输入组件。在这个组件中，我希望当用户单击搜索图标时，输入焦点及其宽度由 css3 过渡属性增加。这是我的一段代码：

    <input className={"news-search-v2"} type="text" />
    <i className="material-icons"> search </i>

以及我的组件的手写笔代码

.news-search-v2
   width 0px
   transition: ease 0.5s all
   &:focus
      border-bottom solid 1px #5f6368
      width 300px