Event.preventDefault() 在点击中不起作用

Question

在下面的代码中，我尝试使用 event.preventDefault() 但它不起作用。我正在尝试解决一个问题：如果名称为空，则其不可单击。

      <Anchor onClick={(event) => { props.someMethod(prop1, event); }}>
        <div className="u-pt--sm">
          {prop1.title}
        </div>
    .....
 </Anchor>

  someMethod(prop1, event) {
    if (prop1.name === '') {
      event.preventDefault();
    }
   ....
  }

如果我调试代码，我会看到事件即将发生

[[Handler]]
:
Object
[[Target]]
:
SyntheticMouseEvent
[[IsRevoked]]
:
false

知道为什么它不起作用吗？

Answer 1

对我来说，简单的答案是使用stopPropagation()而不是preventDefault()

handleClick(e) {
  e.stopPropagation()
  console.log('The link was clicked.')
}                                        

通过以下方式调用：

 <IconButton onClick={(e) => this.handleClick(e)}  >                                                              
   blah
 </IconButton>