如何在不刷新页面的情况下将表单的数据提交给另一个函数？

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