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