React中使用textarea时如何在onChange触发时保留旧文本？

你的代码存在几个关键问题导致无法正确保留旧文本：

1. onChange 事件参数错误：React 的输入控件 onChange 回调接收的是事件对象，而非直接的 name 和 value
2. 初始状态未关联数据库值：当前代码默认初始值为空，没有从数据库加载原始内容
3. 旧文本的更新逻辑不符合需求：如果需要保留数据库原始内容，不应在每次编辑时覆盖旧文本

以下针对两种常见需求场景提供正确实现：

场景1：保留数据库原始文本（固定不变） #

适用于需要对比原始内容与编辑后内容的场景（如审计、版本回溯）

import React, { useState, useEffect } from 'react';

const App = () => {
    // 假设从数据库获取的原始文本，若为异步请求可使用useEffect加载
    const [originalText, setOriginalText] = useState('');
    const [editedText, setEditedText] = useState('');

    // 模拟从数据库加载初始内容
    useEffect(() => {
        // 替换为实际API请求
        const fetchInitialText = async () => {
            const res = await fetch('/api/get-db-text');
            const data = await res.json();
            setOriginalText(data.content);
            setEditedText(data.content);
        };
        fetchInitialText();
    }, []);

    const handleSave = () => {
        // 调用API同步更新数据库，传入原始文本和编辑后文本
        fetch('/api/update-db-text', {
            method: 'POST',
            body: JSON.stringify({ originalText, editedText })
        });
    };

    return (
        <div>
            <textarea
                value={editedText}
                onChange={(e) => setEditedText(e.target.value)}
                placeholder="编辑内容..."
            ></textarea>
            <button onClick={handleSave}>保存到数据库</button>
            
            <div>
                <p>数据库原始文本:</p>
                <p>{originalText}</p>
            </div>
            <div>
                <p>编辑后文本:</p>
                <p>{editedText}</p>
            </div>
        </div>
    );
};

export default App;

场景2：追踪每次编辑前的文本（动态更新） #

适用于需要记录每一步修改历史的场景

import React, { useState, useEffect } from 'react';

const App = () => {
    const [currentText, setCurrentText] = useState('');
    const [previousText, setPreviousText] = useState('');

    // 加载数据库初始内容
    useEffect(() => {
        const fetchInitialText = async () => {
            const res = await fetch('/api/get-db-text');
            const data = await res.json();
            setCurrentText(data.content);
            setPreviousText(data.content);
        };
        fetchInitialText();
    }, []);

    const handleTextChange = (e) => {
        const newValue = e.target.value;
        // 先保存当前值为上一次文本，再更新当前值
        setPreviousText(currentText);
        setCurrentText(newValue);
    };

    const handleSave = () => {
        // 同步更新数据库，可传入上一次文本和当前文本
        fetch('/api/update-db-text', {
            method: 'POST',
            body: JSON.stringify({ previousText, currentText })
        });
    };

    return (
        <div>
            <textarea
                value={currentText}
                onChange={handleTextChange}
                placeholder="编辑内容..."
            ></textarea>
            <button onClick={handleSave}>保存修改</button>
            
            <div>
                <p>上一次编辑前的文本:</p>
                <p>{previousText}</p>
            </div>
            <div>
                <p>当前文本:</p>
                <p>{currentText}</p>
            </div>
        </div>
    );
};

export default App;

核心修复点 #

1. 修正 onChange 事件：通过 e.target.value 获取输入框的最新值
2. 初始状态初始化：从数据库加载原始内容并同步到新旧文本状态
3. 旧文本更新逻辑：根据需求选择固定原始值或追踪每次修改前的状态

内容的提问来源于stack exchange，提问作者adventureworks