有没有办法在Reactjs中设置元素的初始高度？

Question

我有一个react组件，它允许根据内部文本调整大小的文本区域。

return (<div className={`resizable-textbox ${className}`}>
   <textarea
      value={value}
      onChange={onChangeMade}
      onBlur={onBlur}
      readOnly={readOnly} />
</div>);

onChangeMade方法如下：

const onChangeMade = (e) => {
  const scrollHeightPadded = e.target.scrollHeight;

  if ((scrollHeightPadded + "px") !== e.target.style.height) {
    e.target.style.height = 0;
    const height = Math.max(scrollHeightPadded, 31) + 3;
    e.target.style.height = `${height}px`;
  }
}

我知道这是一种难看的方法，需要清理。但是，我想在第一次加载组件时调用一次此方法，但是e是由textarea标记触发的事件。

是否有方法可以将其挂接到该方法或直接插入到component中？ （我正在使用React Hooks和无状态components）。

谢谢。

Answer 1

您可以使用createRef创建参考，并将其提供给ref的{​​{1}}道具，并使用它代替事件。

示例

textarea