web-dev-qa-db-fra.com

Utilisation inattendue de 'event' no-restricted-globals lors de l'utilisation de event.target.id pour obtenir l'identifiant de bind (this)

Ce code fonctionne sur Codepen: Voir https://codepen.io/pkshreeman/pen/YQNPKB?editors=0010 Cependant, j'essaie de l'utiliser dans mon propre 'create-react-app' et l'erreur de ' no-restricted-globals 'est déclenché par event.target.id. Quelle est la solution de contournement pour cela. Comment obtenez-vous l'identifiant de 'this' in réagit autrement qu'en utilisant 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'))
javascriptreactjsthis
5
Dr. Paul Kenneth Shreeman

Il est étrange que cela fonctionne même dans codepen - on dirait que vous utilisez une propriété globale event.

La bonne façon de faire est d’obtenir l’objet événement du premier paramètre de la fonction handleClick:

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

Vous devrez peut-être spécifier l'événement sur la fonction de passage, je suppose.

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

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

Essayez ceci si cela fonctionne pour vous.

1
Karan Tewari