Как сфокусировать ввод, когда пользователь нажимает на ввод? - PullRequest
Новая
       19

Как сфокусировать ввод, когда пользователь нажимает на ввод?

0 голосов
/ 02 марта 2020

Я пытался создать компонент ввода для поиска в реакции. 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

Ответы [ 2 ]

1 голос
/ 02 марта 2020

Объявите атрибут name для Input, оберните значок в элементе label и предоставьте ему атрибут for, значение которого будет равно имени входного: Reason 

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

чтобы заставить это работать в реакции. используйте «htmlFor» вместо «для»: Причина

0 голосов
/ 02 марта 2020

Arnav Yagnik ответ правильный, но не React решение.

Вы можете использовать useRef ловушку, если ваш компонент работает. 

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>
    </>
  );
};

Или если вы Используем классифицированное представление вида createRef: 

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>
      </>
    );
  }
}
...