Question

我写了按下按钮时会调用的函数函数参数是按钮ID - 但是在这个按钮上我需要调用方法'preventDefault'

据我所知，我必须将我的函数的参数从按钮id更改为按钮本身才能使用button.preventDefault()

还有其他方法可以调用preventDefault吗？

 OnClickEventOption1(event)
 {
     event.preventDefault()

     // now I can't know which button was pressed
     // need to call button.preventDefault 
 }

 OnClickEventOption2(event)
 {
     // now I can't call the method preventDefault()
     //event.preventDefault()
 }


 redrer(){

     // option 1 
     return <div>
            <button onClick={this.OnClickEventOption1(this)} id={1} key={1} />
            <button onClick={this.OnClickEventOption1(this)} id={2} key={2} />  
        </div>;

// option 2 
return <div>
    <button onClick={this.OnClickEventOption2(this, 1)} id={1} key={1} />
    <button onClick={this.OnClickEventOption2(this, 2)} id={2} key={2} />
</div>;
}

Answer 1

ES6中的

：

handleClick = e => {
  e.preventDefault();
  let id = e.target.id;
  //do something with id
}

//呈现

return 
  <div>
    <button onClick={this.handleClick} id={1} key={1} />
    <button onClick={this.handleClick} id={2} key={2} />  
  </div>;

Answer 2

您可以在按钮上绑定事件，例如onClick= {this.clickHandler.bind(this)}

然后你默认获得事件。

您只需将此event用作

即可

clickHandler(e){
 e.preventDefault();
}

当参数是元素id时，如何在事件上调用preventDefault？

2 个答案: