使用dangerouslySetInnerHTML时onInput调用花括号被自动加引号问题

问题原因分析 #

你遇到的这个引号注入问题，本质是因为dangerouslySetInnerHTML的工作逻辑和React的JSX解析完全是两回事：

1. 它只处理纯HTML字符串
   dangerouslySetInnerHTML接收的__html值是纯字符串，React会把它直接交给浏览器的innerHTML API去解析。在HTML语法里，事件属性（比如oninput）的值必须是可执行的字符串代码，而不是React式的函数引用。所以当你在HTML字符串里写onInput={handleInput}时，浏览器会把{handleInput}当成普通的字符串字面量，自动给它加上引号，最终渲染成oninput="{handleInput}"——这时候浏览器尝试执行这个字符串时，会发现handleInput在全局作用域不存在，自然也不会触发你预期的事件。

2. React合成事件不生效在这里
   平时我们在JSX里写onInput={handleInput}，这是React的合成事件语法，React会帮你做事件委托、绑定上下文等处理。但dangerouslySetInnerHTML是绕过React的JSX解析流程，直接操作原生DOM，所以这里的事件属性完全遵循原生HTML的规则，和React的事件系统无关。

3. 安全机制的限制
   React给这个API命名为dangerouslySetInnerHTML就是在提醒你：这是有XSS风险的操作，所以它不会对传入的字符串做任何JSX式的解析——不会把花括号里的内容当成JS表达式执行，只会当作普通字符处理，这也是花括号被当成字符串一部分、被引号包裹的原因。

解决方案 #

既然不能通过HTML字符串注入React函数，那正确的做法是在DOM挂载后手动绑定事件：

类组件写法

class MyComponent extends React.Component {
  handleInput = (e) => {
    // 你的输入处理逻辑
    console.log(e.target.value);
  }

  componentDidMount() {
    // 找到注入的input元素
    const inputEl = this.containerRef.querySelector('input');
    if (inputEl) {
      inputEl.addEventListener('input', this.handleInput);
    }
  }

  componentWillUnmount() {
    // 组件卸载前移除事件监听，避免内存泄漏
    const inputEl = this.containerRef.querySelector('input');
    if (inputEl) {
      inputEl.removeEventListener('input', this.handleInput);
    }
  }

  render() {
    return (
      <div ref={ref => this.containerRef = ref} 
           dangerouslySetInnerHTML={{ __html: 你的HTML字符串 }} />
    );
  }
}

函数组件写法

import { useRef, useEffect } from 'react';

const MyComponent = () => {
  const containerRef = useRef(null);

  const handleInput = (e) => {
    console.log(e.target.value);
  };

  useEffect(() => {
    const inputEl = containerRef.current?.querySelector('input');
    if (inputEl) {
      inputEl.addEventListener('input', handleInput);
      // 返回清理函数，组件卸载时移除监听
      return () => inputEl.removeEventListener('input', handleInput);
    }
  }, []);

  return (
    <div ref={containerRef} 
         dangerouslySetInnerHTML={{ __html: 你的HTML字符串 }} />
  );
};

额外提醒 #

除非万不得已，尽量不要用dangerouslySetInnerHTML来构建UI。React的JSX语法本身就是用来替代直接操作HTML字符串的，既安全又能更好地利用React的状态管理和事件系统。如果是因为需要渲染富文本，也可以考虑用专门的富文本渲染库来处理，比直接用dangerouslySetInnerHTML更可靠。

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