Unerwarteter Gebrauch von 'event' no-restricted-globals bei Verwendung von event.target.id, um id von bind (this) zu erhalten

Question

Dieser Code funktioniert auf Codepen: Siehe https://codepen.io/pkshreeman/pen/YQNPKB?editors=0010 Ich versuche jedoch, dies in meiner eigenen 'create- react-app 'und der Fehler' no-restricted-globals 'wird durch event.target.id ausgelöst. Was ist eine Problemumgehung dafür? Wie bekommst du ID von 'this' in der Reaktion anders als die Verwendung des Ereignisziels?

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

Es ist seltsam, dass dies auch in codepen funktioniert - es ist wie Sie eine globale event Eigenschaft verwenden aussieht.

Der richtige Weg, dies zu tun, ist das Ereignisobjekt aus der handleClick Funktion der ersten param zu erhalten:

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