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

Question

I have the following code, which worked perfectly prior to upgrading from React 16.12.0 to React 17.0.0, but now my events no longer fire (ie the console.log statement is never printed).

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>
        );
    }
}

I've tried changing my code to the following instead, but this event does not fire either.

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>
        );
    }
}

I know this has something to do with the fact that the form is inside a Zurb Foundation "Reveal" dialog, but I have no idea why this problem only occurs when upgrading to React 17.

Answer 1

I'm unable to reproduce this – works just fine in this minimal example derived from your code.

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