Javascript 检测<；textarea>；在React中调整事件大小

我有一个自动调整大小的

，效果很好。我想让用户手动调整大小与手柄，在这一点上，自动大小成为禁用。如何捕获

onresize

事件？根据@types/react，

onResize

不可用

这是我到目前为止所拥有的

import React，{PureComponent}来自'React'；
导出默认类MyInput扩展PureComponent{
建造师（道具）{
超级（道具）；
此.state={
自动调整大小：正确，
值：“”
};
}
onChange（事件）{
常量输入=event.target；
this.setState（{value:input.value}）；
if（this.state.autosize）{
常量偏移=input.offsetHeight-input.clientHeight；
input.style.height='auto'；
input.style.height=input.scrollHeight+offset+'px'；
}
}
onResize（）{
this.setState（{autosize:false}）；
}
render（）{
返回此.onChange（e）}/>；
}
}

解决方案似乎是实验类（截至2019年11月）。它目前在Chrome、Firefox和Opera中实现，但在Edge或Safari中没有实现

导出默认类MyInput扩展了PureComponent{
建造师（道具）{
超级（道具）；
this.state={
自动调整大小：正确，
是的，
值：“”
};
this.inputRef=react.createRef（）；
}
componentDidMount（）{
如果（窗口大小调整观察者）{
常量输入=this.inputRef.current，
观察者=新调整大小的观察者（（）=>{
this.setState（{autosize:false}）；
observer.disconnect（）；
});
观察者，观察者（输入）；
}否则{
this.setState（{canResize:false}）；
}
}
// ...
render（）{
返回
}
}

解决方案似乎是实验类（截至2019年11月）。它目前在Chrome、Firefox和Opera中实现，但在Edge或Safari中没有实现

导出默认类MyInput扩展了PureComponent{
建造师（道具）{
超级（道具）；
this.state={
自动调整大小：正确，
是的，
值：“”
};
this.inputRef=react.createRef（）；
}
componentDidMount（）{
如果（窗口大小调整观察者）{
常量输入=this.inputRef.current，
观察者=新调整大小的观察者（（）=>{
this.setState（{autosize:false}）；
observer.disconnect（）；
});
观察者，观察者（输入）；
}否则{
this.setState（{canResize:false}）；
}
}
// ...
render（）{
返回
}
}

您可以查看答案，以查看几个示例，说明如何监控元素的手动调整大小。啊，我查看了这个问题，但它使用JQuery，所以我没有扫描所有答案。我来看看。有一些例子使用的是普通JavaScript，问题不在于React，问题在于调整

大小时没有触发任何

onresize

事件。大多数解决方案都使用鼠标事件并在前后检查元素大小。看起来Firefox和Chrome中实现了一个

ResizeObserver

类。我会用的。在Safari中不受支持，有很多Safari用户。你可以看看答案，看看如何监控元素手动调整大小的几个示例。啊，我看了那个问题，但它使用JQuery，所以我没有扫描所有答案。我来看看。有一些例子使用的是普通JavaScript，问题不在于React，问题在于调整

大小时没有触发任何

onresize

事件。大多数解决方案都使用鼠标事件并在前后检查元素大小。看起来Firefox和Chrome中实现了一个

ResizeObserver

类。我会用的。Safari中不支持，有很多Safari用户。