第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

在 React 中自動(dòng)縮放輸入值的寬度

在 React 中自動(dòng)縮放輸入值的寬度

收到一只叮咚 2023-09-07 10:08:05
我想要一個(gè)寬度適應(yīng)其內(nèi)容的輸入。我正在嘗試實(shí)現(xiàn)類似問(wèn)題的答案,但使用 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>  );};問(wèn)題是我不知道如何查詢跨度的寬度,以便更改輸入的寬度(使用setWidth)。我怎樣才能實(shí)現(xiàn)這個(gè)目標(biāo)?
查看完整描述

3 回答

?
富國(guó)滬深

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è)工作演示。



查看完整回答
反對(duì) 回復(fù) 2023-09-07
?
12345678_0001

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è)置輸入的最小寬度。


查看完整回答
反對(duì) 回復(fù) 2023-09-07
?
森林海

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


查看完整回答
反對(duì) 回復(fù) 2023-09-07
  • 3 回答
  • 0 關(guān)注
  • 198 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)