如何在不刷新頁面的情況下將表單的數據提交到另一個函數？

Question

我正在使用REACT JS開發一組Web應用程序。 對於我正在開發的當前應用程序的一部分，我有一個模態，用於呈現狀態更改，並具有一種形式來接收帶有一些相關數據的名稱。 我希望此表單中的提交按鈕將代碼提交給submitNewName()函數，該函數將比較提交的名稱和數據與JSON文件中的名稱和數據。 不幸的是，由於頁面在提交后刷新，因此刷新了開發者控制台，因此我無法測試我的代碼是否有效。

在我的submitNewName()函數中，我具有以下代碼行： var newName = document.getElementById("newNameForm").submit() 。 我讀了另一個類似的問題，有人建議添加function(e) {e.preventDefault();}作為.submit的參數，但是當我嘗試不改變任何內容時。

這是我的表格：

<form id="addNameForm" className="RNGpopupTXT">
                                Name: <input type="text" name="name"/>
                                <br/><br/>
                                Type:  <select>
                                    <option value="fname">First Name</option>
                                    <option value="lname">Last Name</option>
                                    <option value="sname">Single Name (e.g. Madonna)</option>
                                    <option value="title">Title</option>
                                </select> 
                                <br/><br/>
                                Gender: <select>
                                    <option value="mg">Male</option>
                                    <option value="fg">Female</option>
                                    <option value="ng">Non-specific</option>
                                </select> 
                                <br/><br/>
                                Tags: <input type="text" size="40" name="tags" placeholder=" eg. 'Star Wars,Scifi,Space'"/>
                                <br/><br/><br/><br/>
                                <div align="center">
                                    <input type="submit" value="Submit" className="mdc-button" style={{ textDecoration: 'none' }} onClick={() => this.submitNewName()}/>
                                </div>
                            </form>

這是我的功能：

submitNewName() {
        var newName = document.getElementById("newNameForm").submit(function(e) {
            e.preventDefault();
        });
}

我希望將表單中的數據以一種可以與JSON文件數據進行比較的方式提供給函數。 我也不希望頁面刷新，因為這會刷新頁面狀態，過早關閉模式。 現在運行該程序時，它確實向控制台發送了一條錯誤消息，但是由於控制台隨網頁一起刷新，因此我無法閱讀其中的內容。

Answer 1

感覺您可以在此處使用更多的React來使您的生活更輕松。

您不必使用表單的onSubmit事件。 您可以只向按鈕添加onClick處理程序。 在該函數中，您可以進行所需的所有比較，並且在准備就緒時也可以進行提交邏輯。

如果要比較表單的值，則可能需要保持這些值的狀態。 但是，要這樣做，您將需要在每個表單元素上使用onChange函數以在用戶提供輸入時更新狀態。

因為在您的示例中沒有看到太多的React代碼，所以我自由地編寫了一些代碼。 希望它將對您有所幫助：

https://codesandbox.io/s/elastic-shape-yrv0b