在 React 中自动缩放输入值的宽度

我想要一个宽度适应其内容的输入。

我正在尝试实施这个类似问题的答案 https://stackoverflow.com/a/38867270/5308892，但是使用 React：

import React, { useState } from 'react';

export default () => {
  const [content, setContent] = useState('');
  const [width, setWidth] = useState(0);

  const changeHandler = evt => {
    setContent(evt.target.value);
  };

  return (
    <wrapper>
      <span id="hide">{content}</span>
      <input type="text" autoFocus style={{ width }} onChange={changeHandler} />
    </wrapper>
  );
};

问题是我不知道如何查询跨度的宽度，以便更改输入的宽度（使用setWidth).

我怎样才能实现这个目标？

经过一番折腾，我找到了解决方案！

import React, { useState, useRef, useEffect } from 'react';

export default () => {
  const [content, setContent] = useState('');
  const [width, setWidth] = useState(0);
  const span = useRef();

  useEffect(() => {
    setWidth(span.current.offsetWidth);
  }, [content]);

  const changeHandler = evt => {
    setContent(evt.target.value);
  };

  return (
    <wrapper>
      <span id="hide" ref={span}>{content}</span>
      <input type="text" style={{ width }} autoFocus onChange={changeHandler} />
    </wrapper>
  );
};

获取参考#hide我雇用的跨度useRef。然后，width状态变量可以通过内部定义的函数进行更新useEffect，每次都会被调用content变化。

我还必须切换display: none在CSS中#hide for position: absolute and opacity: 0，否则targetRef.current.offsetWidth总是评估为 0。

Here's 一个工作演示 https://jsfiddle.net/cabralpinto/h32wob50/1/.