带有反应的innerHtml中的onclick元素

Posted 2023-05-07

【中文标题】带有反应的innerHtml中的onclick元素

【英文标题】：onclick element in innerHtml with react

【发布时间】：2019-02-19 12:32:13

【问题描述】：

在一个组件中，我调用一个函数来实现这个动作： .....

  
    .....
    .....
    const functionExam = () => 
    functionExam = function()
    .......
    ......
    node.innerhtml = `<div onclick="functionExam">AAAAAAAAAA</div>`;
    ....
    ....
    


functionExam = () => 
render().....

......

所以，我想当点击 AAAAAA 时，它会调用 fuctionExam，但它有一个错误：

-----Uncaught TypeError: functionExam is not a function
    at HTMLSpanElement.functionExam
------functionExam is not a function
------functionExam is not defined...
...., i tried every way but it still didn'd, please help me.Thank you so much.

【问题讨论】：

你好，不是直接回答，而是推荐。 React 建议你不要直接通过 innerHTML 与 dom 交互。如果确实需要设置一些内部html，可以使用dangerously set inner html in its place

【参考方案1】：

那是因为您的 functionExam 存在于您的文件中，而不是全局（窗口）范围内。首先，在使用 React 时不应该使用 innerHTML。制作一个 React 组件，然后从中监听事件。

function MyDiv() 
  return (<div onClick=functionExam>AAAAAAAAAA</div>);


function functionExam () 
  // things happen

【参考方案2】：

由于 React 中有两种类型的组件，例如功能组件和类组件。 1. 功能组件然后按照下面的代码。

function ActionComponent() 
  function functionExam() 
    console.log('The inner html was clicked.');
  

  return (
    <div onClick=handleClick>AAAAAAAAA</div>
  );

2。类组件如下。

class ActionComponent extends React.Component 
  constructor(props) 
    super(props);

    // This binding is necessary to make `this` work in the callback
    this.functionExam = this.functionExam.bind(this);
  

  functionExam() 
    console.log('The inner html was clicked.');
  

  render() 
    return (
      <div onClick=this.functionExam>AAAAAAAAA</div>
    );
  

如果调用 bind 让你感到厌烦，有两种方法可以使用 箭头函数 来解决这个问题。

class ActionComponent extends React.Component 

  // This syntax ensures `this` is bound within functionExam.
  functionExam = () => 
    console.log('The inner html was clicked.');
  

  render() 
    return (
      <div onClick=this.functionExam>AAAAAAAAA</div>
    );
  

箭头函数的另一种使用方式如下：

class ActionComponent extends React.Component 

  functionExam() 
    console.log('The inner html was clicked.');
  

  render() 
    return (
      <div onClick=()=>this.functionExam>AAAAAAAAA</div>
    );
  

注意：

您可以将任何有效的 javascript 表达式放入 curly JSX 中的大括号 React 使用驼峰式案例。所以使用 onClick 而不是 onclick。 不要在反应中使用 innerHTML。

尝试在组件（即函数或类组件）或可以通过道具访问的父级别进行functionExam。 请让我知道天气，我能回答你的问题。