如何在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>} />
    )
  }
}