내용에 맞게 너비가 조정되는 입력을 갖고 싶습니다.
비슷한 질문에 대한이 답변 을 구현하려고 하지만 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).
이것을 어떻게 달성 할 수 있습니까?
많은 노력 끝에 해결책을 찾았습니다!
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정의 된 함수를 통해 상태 변수를 업데이트 할 수 있습니다 .useEffectcontent
나는 또한 for and display: none의 CSS에서 를 전환해야 했습니다. 그렇지 않으면 항상 0이됩니다.#hideposition: absoluteopacity: 0targetRef.current.offsetWidth
다음 은 작동하는 데모 입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다