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不为空时，单击anchor标签将转到新标签并尝试打开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>

注 -

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

handleClick.bind(this)

Answer 2

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

＆＃13;

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"));

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

对我来说，简单的回答是使用stopPropagation()代替preventDefault()

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

来自：

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

Event.preventDefault（）无法点击

3 个答案: