问题描述
我有以下代码,在从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" />