如何解决在Zurb Foundation“显示”对话框中时,不会触发React表单onSubmit和onClick
我有以下代码,在从React 16.12.0升级到React 17.0.0之前可以很好地工作,但是现在我的事件不再触发了(即永远不会打印console.log
语句)。
class MyClass extends PureComponent {
handleSubmit = () => {
console.log('Submitted!');
};
render() {
return (
<div className='reveal' id='dialog'>
<form onSubmit={this.handleSubmit}>
<button type='submit'>Submit</button>
</form>
</div>
);
}
}
我尝试将代码更改为以下代码,但是此事件也不会触发。
class MyClass extends PureComponent {
handleSubmit = () => {
console.log('Submitted!');
};
render() {
return (
<div className='reveal' id='dialog'>
<form>
<button onClick={this.handleSubmit} type='submit'>Submit</button>
</form>
</div>
);
}
}
我知道这与表单位于Zurb Foundation“显示”对话框中有关,但是我不知道为什么仅在升级到React 17时才会出现此问题。
解决方法
我无法重现此内容-在这个从您的代码派生的最小示例中效果很好。
class MyClass extends React.PureComponent {
handleSubmit = () => {
alert('Submitted!');
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<button type='submit'>Submit</button>
</form>
);
}
}
ReactDOM.render(<MyClass />,document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<div id="root" />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。