React中如何在onBlur事件中提取innerHTML？Proxy对象处理疑问

嘿，我明白你遇到的困惑了——之前用onChange、onClick时，直接从event.target取value很顺畅，但到onBlur这儿拿到的却是个Proxy对象，摸不着头脑对吧？别担心，这其实是React合成事件的特性导致的，咱们一步步解决它：

核心原因：React的合成事件封装 #

你看到的Proxy对象其实是React的合成事件（SyntheticEvent），它是React对浏览器原生事件的一层封装，目的是实现跨浏览器兼容。这个Proxy只是外层包装，咱们可以通过它拿到真实的原生事件和DOM元素。

提取innerHTML的具体方法 #

只需要两步就能拿到你要的innerHTML：

1. 通过合成事件的nativeEvent属性获取浏览器原生的事件对象
2. 从原生事件的target或currentTarget拿到对应的DOM元素，再提取innerHTML

给你结合你的类组件写个示例：

import React, { Component } from "react";

export default class Subject extends Component {
  handleBlur = (event) => {
    // 拿到原生事件对象里的真实DOM元素
    const domElement = event.nativeEvent.target;
    // 提取innerHTML
    const contentHTML = domElement.innerHTML;
    
    console.log("提取到的innerHTML：", contentHTML);
    // 这里可以做你后续的逻辑处理
  };

  render() {
    // 注意：要让非表单元素能触发blur事件，需要设置tabIndex属性
    return (
      <div onBlur={this.handleBlur} tabIndex="0">
        这是测试的<span>富文本</span>内容
      </div>
    );
  }
}

额外小贴士 #

• 区分target和currentTarget：target是实际触发事件的DOM元素，currentTarget是绑定了onBlur事件的元素，根据你的业务需求选择即可。
• 如果需要在异步操作中访问事件对象，记得先调用event.persist()，因为React会在事件回调结束后自动回收合成事件对象，异步访问会导致它被销毁。

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