将JavaScript onclick事件转换为React onClick写法后deleteBrochure函数无法触发的问题求助

你刚学React就遇到了一个很典型的「原生HTML到React思维转换」的问题，别担心，这很正常！

核心问题所在 #

你现在的写法是把按钮的HTML代码当成字符串返回，但React的事件绑定机制和原生HTML完全不同：

• 原生HTML里的onclick是接收一段字符串形式的代码；
• 但React的onClick属性需要接收一个实际的函数引用，而不是字符串。

你用字符串拼接出来的"{() => this.deleteBrochure(...)}"，在React眼里只是一段普通文本，它不会把里面的箭头函数解析成可执行的事件处理函数，所以点击按钮自然不会触发deleteBrochure。

正确的写法：直接返回JSX元素 #

React组件应该返回JSX元素（不是HTML字符串），JSX是React的语法糖，会被编译成React能识别的代码，从而正确绑定事件。

把你的代码改成这样：

return <button onClick={() => this.deleteBrochure(albumName, photoKey)}>DELETE</button>;

额外注意事项（类组件场景） #

如果你的代码是在类组件里，还要确保this的指向正确：

• 可以用箭头函数定义deleteBrochure方法，自动绑定this：

  class YourComponent extends React.Component {
    // 用箭头函数定义方法，避免this指向问题
    deleteBrochure = (albumName, photoKey) => {
      // 你的删除逻辑代码
      console.log(`删除手册：${albumName} - ${photoKey}`);
    };
  
    render() {
      const { albumName, photoKey } = this.props;
      return <button onClick={() => this.deleteBrochure(albumName, photoKey)}>DELETE</button>;
    }
  }
  

• 如果是函数组件，就更简单，不需要考虑this的问题：

  function YourComponent({ albumName, photoKey }) {
    const deleteBrochure = (album, key) => {
      // 删除逻辑
      console.log(`删除手册：${album} - ${key}`);
    };
  
    return <button onClick={() => deleteBrochure(albumName, photoKey)}>DELETE</button>;
  }
  

为什么不能用字符串拼接？ #

React不推荐用字符串拼接HTML内容（除非用dangerouslySetInnerHTML，但这有严重的XSS安全风险），而且即使你用了dangerouslySetInnerHTML，React也不会解析字符串里的事件绑定，因为它只会把内容当成纯HTML渲染，不会处理React的事件系统。

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