javascript - 单击 Materialize-css React 按钮内的图标会触发 onClick

标签 javascript reactjs onclick materialize

单击按钮会适本地触发 onClick,但单击按钮内的图标也会触发 onClick,但没有正确的数据(item.target.className 等)

<button id={check} onClick={this.changeTimesButton} className="waves-effect waves-light btn"><i className="material-icons">check_box</i></button>

是否有办法禁用图标被点击

在react项目中使用materialize-css

最佳答案

如果你无法在 this.changeTimesButton(event) 中处理 event.target :

在图标标签上设置 onClick() 然后阻止默认操作

    <button id={check} onClick={this.changeTimesButton} 
      className="waves-effect waves-light btn">
      <i className="material-icons" onClick={(e)=>{e.preventDefault()}}>check_box</i>
    </button>

更新

您可以使用stopPropagation代替preventDefault

有关 stopPropagation 和 PreventDefault 的更多详细信息,请参阅:

What's the difference between event.stopPropagation and event.preventDefault?

关于javascript - 单击 Materialize-css React 按钮内的图标会触发 onClick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48106614/

相关文章:

arrays - 使用 Formik.js 时如何在对象中创建嵌套数组?

javascript - Fabric.js 对象在以编程方式更改属性后消失

javascript - 使用保存和取消按钮切换编辑按钮

asp.net - 我可以在嵌入式 Javascript 部分中使用 VB 变量吗?

javascript - 自定义单元格表 react 虚拟化

javascript - 我有一个函数设置为 onClick 事件,它将一组数据发送回 API

javascript - 灯箱随着任何过渡淡入淡出

javascript - 第一个更新第二个依赖项的相关 useEffects 会导致奇怪的行为

javascript - 模态显示onclick jquery

android - 如何实现双短按和长按的Button?