反应，通过dragonallySetInnerHTML在html中设置onClick

Question

I have a txt component that renders via dangerouslySetInnerHTML

It has this line:

lines[i] = lines[i].replace(capoRegex, "<div class='capo' onClick={this.toggleTranspose()}>$1</div>");

But when I click the element, I get this error:

TypeError: this.toggleTranspose is not a function

How do I call my component's function from dangerouslySetInnerHTML ?

Answer 1

You can add it to the parent lifecycle method

componentDidMount: function() {
    $('.capo').click(function(e){
        ...
    })
} 

have a look at this https://www.freecodecamp.org/forum/t/react-component-onclick/162316/3

Answer 2

@victor zadorozhnyy's answer was the right direction. I didn't have jquery, and I needed to access the components setState method, so this was my final code:

var component = this;
document.getElementById('capo').addEventListener('click', function(e) {
  transpose = parseInt(e.target.dataset["capo"]);
  component.setState({
    transpose: transpose
  });
}