如何在仍然能够编辑文本区域的同时动态更新文本区域的值 - React

Question

我有一个 textarea 和一个 onChange 处理程序：

onChange(e) {
    this.setState({
        [e.target.name]: e.target.value
    });
}

但我还希望能够根据来自 MongoDB 的数据动态设置 value 属性。这是一个日记应用程序，所以它的想法是通过设置 value={this.displayEntry()} 来查找条目。问题是，我无法输入 textarea 因为每次我输入一个键时 onChange 都会触发并且 value 被预设为 MongoDB 或空字符串.

从MongoDB添加代码的函数（journal来自Redux）

displayEntry() {
    const { todaysDate } = this.state;
    const { journal } = this.props;
    if (journal) {
        for (let entry of journal.data.entries) {
            if (entry.date === todaysDate) {
                return entry.content;
            }
        }
        return "";
    }
    return "";
}

我希望清楚我想要实现的目标。有办法解决这个问题吗？

Answer 1

我认为你必须只从 redux 数据初始化状态一次。然后就可以继续编辑了。

例如（假设您的文本区域的名称是 journal）：

onChange(e) {
    this.setState({
        [e.target.name]: e.target.value
    });
}

getEntry() {
    const { todaysDate } = this.state;
    const { journal } = this.props;
    if (journal) {
        for (let entry of journal.data.entries) {
            if (entry.date === todaysDate) {
                return entry.content;
            }
        }
        return "";
    }
    return "";
}

componentDidMount() {
      this.setState({
        journal: getEntry()
    });
}

// in render
<textarea value={this.state.journal} onChange={this.onChange} />

如何在仍然能够编辑文本区域的同时动态更新文本区域的值 - React

How can you update a textarea's value dynamically while still being able to edit it - React

javascript

dom

textarea

reactjs