React中如何将div的HTML内容作为onChange参数传入useState？

核心需求与问题 #

需求：保存div的全部内容，element参数可传入任意HTML内容；当该HTML内容发生变化时，通过useState保存并更新状态。
问题：如何将div标签自身的HTML内容作为参数传入onChange对应的方法中？

原代码的核心问题 #

首先明确：<div>标签默认不支持onChange事件，这个事件仅针对<input>、<textarea>这类表单元素触发，所以原代码里的onChange={saveData}永远不会执行。

下面分两种常见场景给出解决方案：

场景1：element是父组件传入的动态内容 #

如果element是父组件传递的、会动态变化的JSX/HTML内容，不需要监听div的事件，直接通过useEffect监听element的变化，自动更新状态即可：

import { useState, useEffect } from 'react';

const ElementoPaginacion = ({ element }) => {
    const [content, saveElement] = useState(element);

    // 监听element参数变化，自动同步更新状态
    useEffect(() => {
        saveElement(element);
    }, [element]);

    return (
        <div>
            {content}
        </div>
    );
};

场景2：div是用户可编辑的内容容器 #

如果需要让div支持用户手动编辑（比如设置contentEditable="true"），可以通过onInput或onBlur事件获取div的完整HTML内容，再更新状态：

import { useState } from 'react';

const ElementoPaginacion = ({ element }) => {
    const [content, saveElement] = useState(element);

    const saveData = (e) => {
        // 获取div的完整HTML内容
        const newContent = e.currentTarget.innerHTML;
        saveElement(newContent);
    };

    return (
        <div 
            contentEditable="true"
            onInput={saveData} // 实时监听内容变化
            // 也可以用onBlur={saveData}，仅在失去焦点时保存
        >
            {content}
        </div>
    );
};

补充：处理字符串形式的HTML #

如果element是纯字符串格式的HTML（而非JSX），渲染时需要用dangerouslySetInnerHTML，同步状态的逻辑如下：

import { useState, useEffect } from 'react';

const ElementoPaginacion = ({ element }) => {
    const [content, saveElement] = useState(element);

    useEffect(() => {
        saveElement(element);
    }, [element]);

    return (
        <div dangerouslySetInnerHTML={{ __html: content }} />
    );
};

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