innerHtml中的onclick元素与react

Question

In a component, i call a funtion to implement this action: .....

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

functionExam = () => {}
render(){.....

......

So, I want when click on AAAAAA, it will call fuctionExam, but it has an error:

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

That's because your functionExam live in your file, not in global (window) scope. First of all you shouldn't use innerHTML when using React. Make a React component and then listen from it for events.

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

function functionExam () {
  // things happen
}

Answer 2

As there are two types of component in react such as Functional and Class component.
1. Functional component then follow the below code.

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

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

2. Class Component are as follows.

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>
    );
  }
}

If calling bind annoys you, there are two ways to get rid of this by using arrow function .

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>
    );
  }
}

Another way of using a arrow function is as follows:

class ActionComponent extends React.Component {

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

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

Note :

1. You can put any valid JavaScript expression inside the curly braces in JSX
2. React uses the camel case. So use onClick instead of onclick.
3. Don't use innerHTML in react.

Try to make functionExam within the component(ie function or class component) or at the parent level which can have access through props.
Please let me know weather I am up to the point of your question.