首頁猿問在 React 中自動縮放輸入值的寬度

在 React 中自動縮放輸入值的寬度

JavaScript

收到一只叮咚 2023-09-07 10:08:05

我想要一個寬度適應其內容的輸入。我正在嘗試實現類似問題的答案，但使用 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）。我怎樣才能實現這個目標？

查看完整描述

3 回答

富國滬深

TA貢獻1790條經驗獲得超9個贊

經過一番折騰，我找到了解決方案！

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 (

<span id="hide" ref={span}>{content}</span>

</wrapper>

);

};

#hide為了獲得我所使用的跨度的參考useRef。然后，width狀態變量可以通過內部定義的函數進行更新useEffect，每次更改時都會調用該函數content。

我還必須在for和display: none的 css 中切換，否則總是會計算為 0。#hideposition: absoluteopacity: 0targetRef.current.offsetWidth

這是一個工作演示。

反對回復 2023-09-07

12345678_0001

TA貢獻1802條經驗獲得超5個贊

發現了一個在 React 中使用 Refs 的技巧。

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

ref={inputRef}并為元素設置。請記住在 CSS 中設置輸入的最小寬度。

反對回復 2023-09-07

森林海

TA貢獻2011條經驗獲得超2個贊

這是我找到的最簡單的解決方案。

您創建一個將在更改時使用的函數

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

const target = ev.target;

target.style.width = '60px';

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

handleChange(ev);

};

然后將其用作組件中的常規函數

style.width = 60px 將允許在縮小時調整輸入大小，而 target.scrollWidth 將監視 x 軸上的“可滾動寬度”并將其設置為寬度。

注意：歸功于這個人：https://www.youtube.com/watch?v=87wfMZ56egU

反對回復 2023-09-07

3 回答
0 關注
204 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 React 中自動縮放輸入值的寬度

在 React 中自動縮放輸入值的寬度

3 回答

添加回答