how to use click event in html string in spfx (react)
-
07-01-2021 - |
Question
I have a html string embedded in a map function like this
pnp.sp.web.lists.getByTitle("Division").items.select("Title","ID").get().then((item: any[]) => divtree=item.map(per =>'<li id='+per.Title+' style="cursor:pointer" onclick="myfunction()" >'+per.Title+'</li>');
divtree.toString().replace(/,/g , "");});
this.setState({
divtree: divtree
});
This is used in return like this
<div dangerouslySetInnerHTML={{__html: this.state.divtree}} ></div>
I m declaring the function myfunction() like this
private myfunction(): void { console.log('working') }
My problem is that when I click on the li element which was created dynamically I get the error myfunction() function is not defined
La solution
The simplest option here is declare the function not as a class member but just like a variable in window like
window.myFunction = function {}
But I would look at removing your dangerous html insertion at all. You can return a set of React components from your .map function and insert them into div. Like that
var els = items.map(i => return (<li>...</li>););
And then
<div>{els}</div>
In that case you’ll be able to use React syntax to add even handler:
<li onClick={this.myFunction.bind(this)}>
Licencié sous: CC-BY-SA avec attribution
Non affilié à sharepoint.stackexchange