在 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 () => {&nbsp; const [content, setContent] = useState('');&nbsp; const [width, setWidth] = useState(0);&nbsp; const span = useRef();&nbsp; useEffect(() => {&nbsp; &nbsp; setWidth(span.current.offsetWidth);&nbsp; }, [content]);&nbsp; const changeHandler = evt => {&nbsp; &nbsp; setContent(evt.target.value);&nbsp; };&nbsp; return (&nbsp; &nbsp; <wrapper>&nbsp; &nbsp; &nbsp; <span id="hide" ref={span}>{content}</span>&nbsp; &nbsp; &nbsp; <input type="text" style={{ width }} autoFocus onChange={changeHandler} />&nbsp; &nbsp; </wrapper>&nbsp; );};#hide为了获得我所使用的跨度的参考useRef。然后，width状态变量可以通过内部定义的函数进行更新useEffect，每次更改时都会调用该函数content。我还必须在for和display: none的 css 中切换，否则总是会计算为 0。#hideposition: absoluteopacity: 0targetRef.current.offsetWidth这是一个工作演示。

Answer 2

发现了一个在 React 中使用 Refs 的技巧。style={{&nbsp;width:&nbsp;inputRef.current&nbsp;?&nbsp;inputRef.current.value.length&nbsp;+&nbsp;'ch'&nbsp;:&nbsp;'auto'&nbsp;}}ref={inputRef}并为元素设置。请记住在 CSS 中设置输入的最小宽度。

Answer 3

这是我找到的最简单的解决方案。您创建一个将在更改时使用的函数&nbsp; &nbsp;const handleChangeAndSize = (ev: ChangeEvent<HTMLInputElement>) => {&nbsp; &nbsp; &nbsp; const target = ev.target;&nbsp; &nbsp; &nbsp; target.style.width = '60px';&nbsp; &nbsp; &nbsp; target.style.width = `${target.scrollWidth}px`;&nbsp; &nbsp; &nbsp; handleChange(ev);&nbsp; &nbsp;};然后将其用作组件中的常规函数<input type='text' onChange={handleChangeAndSize}/>style.width = 60px 将允许在缩小时调整输入大小，而 target.scrollWidth 将监视 x 轴上的“可滚动宽度”并将其设置为宽度。注意：归功于这个人：https://www.youtube.com/watch?v=87wfMZ56egU