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

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。

我还必须在for和display: none的 css 中切换，否则总是会计算为 0。#hideposition: absoluteopacity: 0targetRef.current.offsetWidth

这是一个工作演示。

Answer 2

发现了一个在 React 中使用 Refs 的技巧。

style={{ width: inputRef.current ? inputRef.current.value.length + 'ch' : 'auto' }}

ref={inputRef}并为元素设置。请记住在 CSS 中设置输入的最小宽度。

Answer 3

这是我找到的最简单的解决方案。

您创建一个将在更改时使用的函数

   const handleChangeAndSize = (ev: ChangeEvent<HTMLInputElement>) => {

      const target = ev.target;

      target.style.width = '60px';

      target.style.width = `${target.scrollWidth}px`;

      handleChange(ev);

   };

然后将其用作组件中的常规函数

<input type='text' onChange={handleChangeAndSize}/>

style.width = 60px 将允许在缩小时调整输入大小，而 target.scrollWidth 将监视 x 轴上的“可滚动宽度”并将其设置为宽度。

注意：归功于这个人：https://www.youtube.com/watch?v=87wfMZ56egU