Question

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

  {
    .....
    .....
    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.

Answer 1

由于react中有两种类型的组件，例如Functional和Class组件。
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>
    );
  }
}

如果使绑定烦恼，可以使用 arrow函数消除这种情况。

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。

尝试在可以通过props访问的组件（即函数或类组件）内或在父级进行functionExam。
请让我知道天气，直到您提出问题为止。

innerHtml中的onclick元素与react

1 个答案: