React解决＜textarea＞绑定value后，修改＜textarea＞内容光标移动到最后的问题

1、问题描述

笔者在react项目中使用<textarea>且value值使用双向数据绑定时，每次在<textarea>内容中间进行编辑修改后，光标都会立即跳到文本最后，影响编辑体验！

<textarea value={this.state.content} onChange={e => {
    this..setState({
        content: e.target.value;
    });
}} />

2、原因分析

许多框架在实现<textarea>的双向数据绑定时，数据内容发生变化后，光标会移动到最后一位（react/vue/uniapp/微信小程序开发等），简而言之就是：数据发生改变时光标自动移到<textarea>内容最后，以跟踪数据！

// 光标移动至末尾方式大致实现如下（仅供参考，也可以通过该方式解决光标问题）
function appendTextAndFocusToEnd(textareaId, textToAdd) {  
    let textarea = document.getElementById(textareaId);  
    // 添加文本到 textarea  
    textarea.value += textToAdd;  
      
    // 将光标移动到文本末尾  
    // 首先确保 textarea 是可见的（聚焦的），否则在某些浏览器中可能不起作用  
    textarea.focus();  
      
    // 使用 setSelectionRange 方法将光标设置到文本末尾  
    let pos = textarea.value.length;  
    textarea.setSelectionRange(pos, pos);  
}  
  
// 调用函数，例如向 id 为 "myTextarea" 的 textarea 添加文本  
appendTextAndFocusToEnd("myTextarea", "新添加的文本\n");

3、解决方式

在react中可以通过使用defaultValue + 非state数据存储value值避免该问题（本质上是通过非响应式更新方式实现双向数据绑定）

<textarea defaultValue={content} onChange={e => {
    // content直接定义在Component组件之外，避免组件更新时被归零了！
	content= e.target.value;
}} />

// 点击按钮提交时再把content提交过去