如何在ReactJS中的onClick中传递事件

Question

我试图以某种方式在自定义组件上调用“ preventDefault”，但未成功。 这是我的尝试。 第一次尝试使用“ e”传递元素引用，而不传递实际事件。 第二种方法可以传递事件，但是prevent默认方法不会阻止任何事件。 做这个的最好方式是什么？

<MyComponent header= {
    <div onClick={e => { e.preventDefault(); myFunction.bind(this, event) }}>
       Header
    </div> 
} />

function myFunction(event) {
   event.preventDefault();
}

Answer 1

我会这样做：

<MyComponent header={<div onClick={myFunction}>Header</div>} />

function myFunction(event) {
   event.preventDefault();
}

或者，如果您需要在点击处理程序中使用this ：

class App extends React.Component {
  myFunction = (event) => {
    event.preventDefault();
    this.setState({ clicked: true });
  }

  render () {
    return (
      <MyComponent header={<div onClick={this.myFunction}>Header</div>} />
    )
  }
}