使用 event.target.id 从 bind(this) 获取 id 时意外使用“事件”无限制全局变量

IT技术 javascript reactjs this
2021-04-25 22:45:05

此代码适用于 Codepen：请参阅https://codepen.io/pkshreeman/pen/YQNPKB?editors=0010 但是我试图在我自己的“create-react-app”和“no-restricted-”错误中使用它globals' 由 触发event.target.id。什么是解决方法。除了使用事件目标之外，您如何从“this”中获取 id 以做出react？

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'))
3个回答

奇怪的是，这甚至可以在 codepen 中使用 - 看起来您正在使用全局event属性。

正确的做法是从handleClick函数的第一个参数中获取事件对象：

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

我猜您可能需要在传递函数上指定事件。

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

如果它适合你，试试这个。

在方法中将事件作为参数传递，这是一个示例：

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

        this.setState({[inputName]:[inputValue]})
    }
其它你可能感兴趣的问题
上一篇通过 ES6 module导入加载和使用旧版 JS module（例如 IIFE） 下一篇React 中的事件驱动方法？