反应表单 onSubmit 和 onClick 在 Zurb Foundation "Reveal" 对话框中不触发

Question

我有以下代码，在从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基金会"内部"；显示"；对话框，但我不知道为什么只有在升级到React 17时才会出现这个问题。

Answer 1

我无法重现这一点——在这个从您的代码派生的最小示例中工作得很好。

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" />