无法在“窗口”上执行“getComputedStyle”：参数 1 不是 React 中的“元素”类型错误

Question

我正在尝试在 React 应用程序中使用 JavaScript 自动扩展（向上）文本框。得到这个错误。也尝试使用 window.getElementbyId 代替，但这不起作用。

[![error image][1]][1]

   <ReactTextareaAutocomplete
   id="textbox"
   className="message-input"
   placeholder="Type your message.."/>

const tx = document.getElementsByTagName("ReactTextareaAutocomplete");
const maxheight = 100;
const normalheight = window.getComputedStyle(tx[0]).getPropertyValue('height').replace("px", "");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "margin-top:-3px;" + "height:" + (tx[i].scrollHeight > maxheight ? maxheight : tx[i].scrollHeight) + "px;overflow-y:hidden;");
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.marginTop = (normalheight - this.style.height.replace("px", "")) + "px";
  this.style.height = "auto";
  this.style.height = (this.scrollHeight > maxheight ? maxheight : this.scrollHeight) + "px";
}


  


  [1]: <https://i.stack.imgur.com/1UbRS.png>

Answer 1

实现useRef() 来访问元素。

在元素上添加ref 属性。

<ReactTextareaAutocomplete ref={rtaRef} />

对于函数：

const tx = useRef(null);

如果您有多个组件实例，请使用循环使用循环索引创建唯一的ref。