div 模拟 textarea

311 阅读1分钟

由于 textarea 无法自动根据文本内容增加高度
contentEditable 属性可以让元素可编辑,于是使用 contentEditable 属性模拟textarea

react 中使用该属性可能会提示警告
增加 suppressContentEditableWarning 属性可以排除警告
获取数据可以用 e.currentTarget.innerText ,或者用 ref.current.innerHTML

关键代码


const [data, setData] = useState()
const onChange = (e: any) => {
  setData(e.currentTarget.innerText)
};
return (<div
  contentEditable={true}
  onBlur={(e) => onChange(e)}
  suppressContentEditableWarning
>
  {data}
</div>);