由于 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>);