0

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.
1
  • Hello, not really a direct answer, but a recommendation. React recommends that you do not interact with the dom directly via innerHTML. If you do need to set some inner html, you can use dangerously set inner html in its place Commented Sep 14, 2018 at 17:09

3 Answers 3

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
}
Sign up to request clarification or add additional context in comments.

Comments

0

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(i.e 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.

Comments

0

Instead of

.......
......
node.innerHtml = `<div onclick="functionExam">AAAAAAAAAA</div>`;
....
....

You should use

.......
......
const div = document.createElement('div')
div.innerText = 'AAAAAAAAAA'
div.onclick = functionExam
node.innerText = ''
node.appendChild(div)
....
....

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.