web-dev-qa-db-ja.com

bind（this）からIDを取得するためにevent.target.idを使用する場合の「event」no-restricted-globalsの予期しない使用

このコードはCodepenで動作します： https://codepen.io/pkshreeman/pen/YQNPKB?editors=001 を参照してください。ただし、これを自分の 'create-react-app'および'no-restricted-globals'のエラーはevent.target.idによってトリガーされます。これの回避策は何ですか。イベントターゲットを使用する以外の反応で「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'))
javascriptreactjsthis
8
Dr. Paul Kenneth Shreeman

これがコードペンでも機能するのは奇妙です-グローバルeventプロパティを使用しているようです。

これを行う正しい方法は、handleClick関数の最初のパラメーターからイベントオブジェクトを取得することです。

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

おそらく、渡す関数でイベントを指定する必要があるかもしれません。

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

それがあなたのために働くなら、これを試してください。

3
Karan Tewari

メソッドのパラメーターとしてイベントを渡すこれは一例です：

onChangeHandaler = (event)=>{
        var inputName = event.target.name;
        var inputValue = event.target.value;

        this.setState({[inputName]:[inputValue]})
    }
0
Tariqul Islam