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

您可以访问prop内部事件函数，如下面的代码片段。

还要检查this（在jsfiddle中）的preventDefault（）功能。只需检查更改名称道具。当name prop不为空时，单击锚标签将转到新选项卡并尝试打开URL，否则将被禁用。

var handleClick= function(event) {
     console.log(this.props.name);
     if (this.props.name === "") {
      event.preventDefault();
    }
 }

var Hello = React.createClass({
  render: function() {
    return (
      <a target="_blank" href="www.google.com" onClick={handleClick.bind(this)}>click me</a>
    )
  }
});

ReactDOM.render(
  <Hello name="name"/>,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>

注意-

需要使用this明确绑定click事件函数。所以在事件内部函数中，我们可以访问道具。

handleClick.bind(this)

Answer 2

你不需要event.preventDefault();机制，你可以有条件地在onClick上设置事件处理程序。 在这个简单的例子中，你有一个button和一个checkbox，该复选框将对一个名为clickable的状态的属性负责。 只有当clickable设置为true时，我们才会将事件处理程序传递给button（我们可以以同样的方式将它设为disable）：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clickable: false
    };

    this.toggleClickable = this.toggleClickable.bind(this);
    this.onElementClick = this.onElementClick.bind(this);
  }

  toggleClickable() {
    this.setState({
      clickable: !this.state.clickable
    });
  }

  onElementClick(e) {
    console.log("element was clicked!");
  }

  render() {
    const { clickable } = this.state;
    return (
      <div>
        <input
          id="enableClick"
          type="checkbox"
          checked={clickable}
          onChange={this.toggleClickable}
        />
         <label htmlFor="enableClick">Enable clicks</label>
         <div/>
        <div className="button" onClick={clickable && this.onElementClick}>Click me if you can</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

.button{
  display:inline-block;
  padding: 10px;
  box-shadow: 0 0 2px 1px #333;
  cursor: pointer
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 3

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

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

通过：

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