javascript - 以编程方式反应更新参考

Question

我有一个输入结构和一个增长的容器（自动扩展文本区域）。输入容器处于绝对位置，我需要始终知道该容器的 offsetHeight。为此，我使用useRef.

所以结构看起来像

const [text, setText] = useState('')
const handleTextChange = (e) => setText(e.target.value)
const ref = useRef(null)
const offsetHeight = ref.current && ref.current.offsetHeight || 70
return (
  <div className="root">
    <SomethingFancy offsetHeight={offsetHeight}>{offsetHeight} 
    </SomethingFancy>
    <div className="input-container-absolute-position" ref={ref} 
    style={{ position: 'absolute', bottom: 0 }}>
      <textarea onChange={handleTextChange} value={text} />
    </div>
</div>

什么有效：

• 如果我输入任何文本并在输入的高度上添加新行，则 .offsetHeight 会更新，工作正常。

什么坏了：

• 如果我删除文本：我有 2 行文本offsetHeight=100px，删除文本使其变为 1 行 ( 70px)，但更改不适用于<SomethingFancy />.

标签： javascriptreactjsecmascript-6