onclick элемент в innerHtml с реагировать

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

Поскольку в реакции есть два типа компонентов, такие как функциональный компонент и компонент класса.
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>
    );
  }
}

Примечание:

1. Вы можете поместить любое допустимое выражение JavaScript в фигурное брекеты в JSX
2. Реакт использует верблюжий чемодан. Поэтому используйте onClick вместо onclick.
3. Не используйте innerHTML в реакции.

Попробуйте создать functionExam внутри компонента (т.е. компонента функции или класса) или на родительском уровне, который может иметь доступ через реквизиты.
Пожалуйста, дайте мне знать погоду, я нахожусь в точке вашего вопроса.

Answer 2

Это потому, что ваш functionExam находится в вашем файле, а не в глобальной (оконной) области. Прежде всего, вы не должны использовать innerHTML при использовании React. Создайте компонент React, а затем прослушайте его на предмет событий.

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

function functionExam () {
  // things happen
}