1. ホーム
  2. javascript

[解決済み] bind(this) から id を取得するために event.target.id を使用する際に 'event' の無制限グローバルが予期せず使用された。

2022-02-15 19:23:46

質問

このコードはCodepenで動作します。 参照 https://codepen.io/pkshreeman/pen/YQNPKB?editors=0010 しかし、私はこれを自分の 'create-react-app' で使おうとしているのですが、 'no-restricted-globals' のエラーが発生するのは event.target.id . この回避策は? イベントターゲットを使用する以外に、reactの'this'からどのようにidを取得するのでしょうか?

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'))

解決方法は?

codepenでこれが動作すること自体が不思議です。 event プロパティを使用します。

正しいやり方は、イベントオブジェクトを handleClick 関数の最初のパラメーターを指定します。

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