代码之家 › 专栏 › 技术社区 › Yanshof

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

reactjs

Yanshof · 技术社区 · 6 年前

我写了一个函数,当按下按钮时会被调用。
函数参数是按钮id——但在这个按钮上,我需要调用“preventDefault”方法

因此,据我所知,我必须将函数的参数从按钮id改为按钮本身,以使用 button.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>;
}

2 回复 | 直到 6 年前

Max 6 年前

在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>;

Manoz 6 年前

您可以像这样在按钮上绑定事件 onClick= {this.clickHandler.bind(this)}

然后,默认情况下您将获得事件。

你可以简单地使用这个 event 像

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

推荐文章

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Agrim Singh · 对象无效,因为使用React router dom时显示React子错误

1 年前

Anaya Ammar · 渲染后未显示的值

1 年前

matin kahrizi · 当我的状态更改时,useSelector不更新

1 年前

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

1 年前

Zemelon · -moz背面可见性不适用于顺风css

1 年前

Abdelaziz Elrasheed · 如何成为专业的网页开发人员。。。?[已关闭]

1 年前

JustTrynaProgram · React和Tailwind-从配置中读取自定义断点值

1 年前

Mark C. · 制作一个可松开的单选按钮[关闭]

1 年前

Tridip Lodh · 在ES6中,JAVASCRIPT函数在“严格使用”模式下的行为如何?[已关闭]

1 年前