如何处理点击而不是href <a>

Question

所以我正在使用一个jquery插件，为了使它正常工作，我必须让我的书现在按钮(样式看起来像一个按钮(在锚标签内。我的反应组件看起来像这样：

export default class Header extends React.Component {
constructor(props){
super(props);
this.state ={
showModal: false,
};
this.openModal = this.openModal.bind(this);
this.exitModal = this.exitModal.bind(this);
}

openModal(){
console.log('hello');
this.setState(()=> ({showModal: true}));
return false;
}
exitModal(){
this.setState(()=> ({showModal: false}));
}
render(){
return (
...
<li>
<a id="navbar-book" href="#" onClick={this.openModal} className="book-button"><span>Book Now</span></a>
</li>
...
<BookModal 
showModal={this.state.showModal}
exitModal={this.exitModal}
/>  
)
}

};

我不想有一个 href，但如果我没有它，我的 dropotron 插件将无法使用它。我已经尝试从函数中返回 false，希望 href 不会运行。我需要它做的只是运行模态。

Answer 1

您可以使用这样的按钮：

<button onClick={this.openModal}>Book Now</button>

但是，如果您确实必须使用链接，则必须在单击事件上使用preventDefault，如下所示：

openModal(event){
event.preventDefault();
this.setState(()=> ({showModal: true}));
return false;
}

Answer 2

用按钮替换它怎么样？

<button onClick={this.openModal}>Book Now</button>