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

我尝试在react.js中创建搜索输入组件。在这个组件中，我想知道当用户单击搜索图标时，输入焦点及其宽度会随着css3转换属性的增加而增加。 这是我的一段代码：

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

---

为输入声明name属性，并将图标包装在label元素中，并为其提供值等于输入名称的属性：

要让它工作起来。使用htmlFor而不是for:

Arnav Yagnik回答是正确的，但不是React解决方案

如果您的组件是函数式的，那么可以使用userefhook

import React from 'react';

const FocusExample = () => {
  const textInput = React.useRef(null);

  const setFocus = React.useCallback(() => { textInput.current.focus() });

  return (
    <>
      <input ref={textInput} className={"news-search-v2"} type="text" />
      <i className="material-icons" onClick={setFocus}> search </i>
    </>
  );
};

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

import React from 'react';

const FocusExample = () => {
  const textInput = React.useRef(null);

  const setFocus = React.useCallback(() => { textInput.current.focus() });

  return (
    <>
      <input ref={textInput} className={"news-search-v2"} type="text" />
      <i className="material-icons" onClick={setFocus}> search </i>
    </>
  );
};

import React from 'react';

class FocusExample extends React.Component {
  constructor(props) {
      super(props);

      this.textInput = React.createRef();
  }

  setFocus = () => {
    this.textInput.current.focus();
  }

  render() {
    return(
      <>
        <input ref={this.textInput} className={"news-search-v2"} type="text" />
        <i className="material-icons" onClick={this.setFocus}> search </i>
      </>
    );
  }
}