Блог

У меня есть ‘textRef’, созданный в родительском компоненте и переданный дочернему компоненту с помощью createRef(). Я пытаюсь динамически фокусировать ввод в дочернем компоненте на изменении реквизита.

Это работает, когда я тестирую на localhost (chrome), но не на веб-просмотре.

Есть какие-либо советы по этому вопросу? Спасибо!!

родительский компонент

 const UserAddressForm = ({ query }) => {
  const textRef = useRef(null);

  const {
    state: { newAddress },
    saveMultiData,
  } = query;

  useEffect(() => {
    if (textRef amp;amp; textRef.current) {
      textRef.current.focus();
    }
  }, [newAddress.zipcode]);

  const onAddressChange = (type, value) => {
    const addressObj = {
      ...newAddress,
    };

    ...

    saveMultiData({ newAddress: addressObj });
  };

  return (
    <InfoUl margin="21px 0px 0px;">
     ...
              <TextField
                ref={textRef}
                label=""
                name="addr2"
                placeholder="상세주소 입력"
                textField={newAddress}
                onInputChange={e => onAddressChange('addr2', e.target.value)}
              />
      
    </InfoUl>
  );
};

  

дочерний компонент

 import React from 'react';
import PropTypes from 'prop-types';
import { LabelBox, InputBox } from './styles';

const TextField = React.forwardRef(
  (
    {
      label = null,
      name,
      type,
      placeholder,
      textField,
      onInputChange,
      autoComplete,
      pattern,
      disabled,
      width,
      flex,
      marginRight,
      marginBottom,
    },
    ref,
  ) => (
    <LabelBox width={width} marginBottom={marginBottom}>
      {label !== null amp;amp; <label htmlFor={label}>{label}</label>}
      <InputBox flex={flex} marginRight={marginRight}>
        <input
          ref={ref}
          type={type || 'text'}
          name={name}
          placeholder={placeholder}
          value={textField[name] || ''}
          onChange={onInputChange}
          autoComplete={autoComplete || 'on'}
          pattern={pattern || null}
          disabled={!!disabled}
        />
      </InputBox>
    </LabelBox>
  ),
);

  

версия

 React v16.9.0
  

Я решил это, используя атрибут автофокусировки ввода, а также атрибут ref.

Поскольку input появляется dynamically при нажатии кнопки, ref.focus не будет работать.

Автофокусировка будет сфокусирована при появлении ввода.

Тогда Ref получит перефокусировку, когда ввод уже помещен в повторный поиск адреса.