当前位置：首页 > React

react如何获取可编辑div的内容

2026-01-26 07:22:26React

获取可编辑 div 内容的方法

在 React 中获取可编辑 div（通过 contentEditable 属性实现）的内容，可以通过以下几种方式实现：

使用 `onInput` 或 `onBlur` 事件

通过监听 onInput 或 onBlur 事件，可以直接从事件对象或 DOM 节点中获取内容。

react如何获取可编辑div的内容

import React, { useState } from 'react';

function EditableDiv() {
  const [content, setContent] = useState('');

  const handleInput = (e) => {
    setContent(e.currentTarget.innerHTML);
  };

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

使用 `ref` 直接访问 DOM

通过 useRef 钩子直接访问 DOM 节点，可以随时获取或修改内容。

react如何获取可编辑div的内容

import React, { useRef } from 'react';

function EditableDiv() {
  const editableRef = useRef(null);

  const getContent = () => {
    console.log(editableRef.current.innerHTML);
  };

  return (
    <div>
      <div
        contentEditable
        ref={editableRef}
        dangerouslySetInnerHTML={{ __html: '初始内容' }}
      />
      <button onClick={getContent}>获取内容</button>
    </div>
  );
}

结合 `useState` 和 `useEffect`

如果需要同步内容到状态，可以结合 useState 和 useEffect 实现。

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

function EditableDiv() {
  const [content, setContent] = useState('初始内容');
  const editableRef = useRef(null);

  useEffect(() => {
    if (editableRef.current) {
      editableRef.current.innerHTML = content;
    }
  }, [content]);

  const handleInput = () => {
    setContent(editableRef.current.innerHTML);
  };

  return (
    <div
      contentEditable
      ref={editableRef}
      onInput={handleInput}
    />
  );
}

处理纯文本内容

如果只需要纯文本内容，可以通过 innerText 或 textContent 获取。

const handleInput = (e) => {
  console.log(e.currentTarget.innerText);
};

注意事项

使用 contentEditable 时，直接操作 DOM 可能会导致 React 的状态与实际 DOM 不同步，建议通过事件或 ref 显式更新状态。
dangerouslySetInnerHTML 用于设置初始内容，但需注意 XSS 安全风险。
对于复杂需求（如富文本编辑器），建议使用现成的库（如 draft-js 或 slate）。