3 回答

TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個(gè)贊
經(jīng)過(guò)一番折騰,我找到了解決方案!
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狀態(tài)變量可以通過(guò)內(nèi)部定義的函數(shù)進(jìn)行更新useEffect,每次更改時(shí)都會(huì)調(diào)用該函數(shù)content。
我還必須在for和display: none的 css 中切換,否則總是會(huì)計(jì)算為 0。#hideposition: absoluteopacity: 0targetRef.current.offsetWidth
這是一個(gè)工作演示。

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
發(fā)現(xiàn)了一個(gè)在 React 中使用 Refs 的技巧。
style={{ width: inputRef.current ? inputRef.current.value.length + 'ch' : 'auto' }}
ref={inputRef}
并為元素設(shè)置。請(qǐng)記住在 CSS 中設(shè)置輸入的最小寬度。

TA貢獻(xiàn)2011條經(jīng)驗(yàn) 獲得超2個(gè)贊
這是我找到的最簡(jiǎn)單的解決方案。
您創(chuàng)建一個(gè)將在更改時(shí)使用的函數(shù)
const handleChangeAndSize = (ev: ChangeEvent<HTMLInputElement>) => {
const target = ev.target;
target.style.width = '60px';
target.style.width = `${target.scrollWidth}px`;
handleChange(ev);
};
然后將其用作組件中的常規(guī)函數(shù)
<input type='text' onChange={handleChangeAndSize}/>
style.width = 60px 將允許在縮小時(shí)調(diào)整輸入大小,而 target.scrollWidth 將監(jiān)視 x 軸上的“可滾動(dòng)寬度”并將其設(shè)置為寬度。
注意:歸功于這個(gè)人:https://www.youtube.com/watch?v=87wfMZ56egU
添加回答
舉報(bào)