Utilisation inattendue de globals non restreints 'event' lors de l'utilisation de event.target.id pour obtenir l'ID de bind (this)

Question

Ce code fonctionne sur Codepen: Voir https://codepen.io/pkshreeman/pen/YQNPKB?editors=0010 Cependant, j'essaie d'utiliser ceci dans ma propre 'création'. reaction-app 'et l'erreur de' no-restricted-globals 'est déclenchée par event.target.id. Qu'est-ce qu'une solution de contournement pour cela. Comment obtenez-vous ID de «ceci» dans la réaction autre que l'utilisation de la cible de l'événement?

const Elem = (props) =>{ 
    return (<div> 
    <h1 onClick={props.clickon} id="GM"> Good Morning! 
     <br/> 
     {props.name} {props.last} 
     <br /> 
     This is phase three</h1> 
    <button id="btn1" onClick={props.clickon}> {props.text} </button> 
     <button id="btn2" onClick={props.clickon}> Second Button </button> 
     </div> 
); 
}; 



class App extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
} 

handleClick(){ 
    var clickedId = event.target.id; 
    console.log(clickedId); 
    alert("It works! You clicked " + clickedId) 
} 
    render(){ 
    return (
    <Elem name = 'paul' last='shreeman' clickon={this.handleClick} text='PushMe'/> 
) 
} 
} 

ReactDOM.render(
<App />, document.getElementById('root')) 

Answer 1

Il est étrange que cela fonctionne même dans codepen - il semble que vous utilisez une propriété event mondiale.

La bonne façon de le faire est d'obtenir l'objet événement de la première fonction de handleClick param:

handleClick(event) { 
    var clickedId = event.target.id; 
    console.log(clickedId); 
    alert("It works! You clicked " + clickedId) 
}