当在 Zurb Foundation“显示”对话框中时，React 表单 onSubmit 和 onClick 不会触发

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 Foundation“Reveal”对话框内的事实有关，但我不知道为什么只有在升级到 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" />