使用 useRef 动态关注输入（子组件）不起作用

Question

我在父组件中创建了 'textRef'，并使用 createRef() 传递给子组件。我正在尝试将子组件中的输入动态地集中在道具更改上。

当我在本地主机 (chrome) 上测试但在网络视图上测试时它确实有效。

关于这个问题有什么建议吗？谢谢！！

父组件

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

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

  useEffect(() => {
    if (textRef && 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 && <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

Answer 1

我通过使用输入 autoFocus 属性以及 ref 属性解决了它。

由于 input 在单击按钮时出现 dynamically，因此 ref.focus 将不起作用。

AutoFocus 将在输入出现时获得焦点。

然后 Ref 将得到 re-focus 其中输入已经放在地址 re-search.

使用 useRef 动态关注输入（子组件）不起作用

dynamically focus on input (children component) using useRef doesn't work

react-hooks

ref

react-forwardref

父组件

子组件

版本