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

Question

我想要一个宽度适应其内容的输入。
我正在尝试实现 this answer to a similar question ，但使用 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 )。
我怎样才能做到这一点？

Answer 1

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

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在 #hide 的 CSS 中对于 position: absolute和 opacity: 0 ，否则 targetRef.current.offsetWidth将始终为 0。
这里是 a working demo .