使用React Re-Render渲染Textarea失去焦点

编程问答 2022-08-16

问题描述

所以，我有一个带有嵌套元素的树结构，可以在大树中移动位置。例如，Object 3可以从这里开始：

 - Object 1
 - Object 2
   - Object 3

但是移到这里：

 - Object 1
 - Object 2
 - Object 3

每个对象中都有一个textarea。当textarea拥有焦点并且React恰好重新渲染时，它将失去焦点。请注意，重新渲染可以像上面那样移动对象的位置（不是简单的列表）。我尝试在对象，文本区域以及两者上使用key，但无论如何，我都失去了注意力。

<Element key={"Element_" + obj.id} /> //unique key id

元素的渲染功能：

render() {
    return  <div className="ElementContainer">
               <div className="ElementTextAreaContainer">
                 <textarea className="Element" onChange={this.handleChange} rows={1} onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} defaultValue={this.state.text} key={"ElementTextArea_" + this.props.obj.id}></textarea>
                 <p className="Element Clone">{this.state.text}</p>
                </div>
            </div>;
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

formsinputreactjsreactjstextarea