JS函数没有在反应中的字符串html内被调用

Question

I am using string html and there is an image in it. I have to call onclick function on it. Onclick function works but for alert only. when I call a JS function it doesn't get called. I have used this.bind, arrow function and every possible way but no result. It is in react, pasting only relevant code here:

 import pic1 from '../../assets/img/1.png' class MapModule extends Component { _isMounted = false; constructor(props) { super(props); this.state = { id: null, redirect: false, store:props.latlng, toggleFlag: false }; this.Toggle = this.Toggle.bind(this); } Toggle () { alert('Clicked'); } let content1 = ` <div class="opacityEffect"> <img width=100% onclick=${this.Toggle} src=${pic1}> </div>`; // This in event on infowindow for google maps marker.addListener('click',function () { map.setZoom(22); map.setTilt(45); infowindow.setContent(content1) infowindow.open(map, marker); });

PS: Everything runs fine, its 200 lines of code. Onclick of map marker infowindow gets open. Now I want to open a new window onClick of infowindow. Thanks in advance!

Answer 1

As I see in your code, you used a normal HTML onclick event to call the React function. In React JS, the syntax of onclick event is as shown below.

<button onClick={activateLasers}>
   Activate Lasers
</button>

As I observe, you need to use the "C" in onclick. I have had the same issue when I am first working on Riot.js and it fixed when I changed to lowercase letters.

And I don't think you need to use "this" inside React events.