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

Question

I'm working on a collection of web apps using REACT JS. For part of the current app I'm working on, I have a modal that renders on a state change and has a form to receive a name with some related data. I want the submit button in this form to submit the code to a submitNewName() function which will compare the submitted name & data to names & data from a JSON file. Unfortunately, I cannot test to see if any of my code works because the page refreshes upon submission, which refreshes the developer console.

Within my submitNewName() function, I have the following line of code: var newName = document.getElementById("newNameForm").submit() . I read another similar question where someone suggested adding function(e) {e.preventDefault();} as an argument for .submit , but when I tried that it didn't change anything.

Here's my form:

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

and here's my function:

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

I would like the data from the form to be given to the function in a way that would allow it to be compared to the JSON file data. I also do not want the page to refresh, as that refreshes the state of the page, closing the modal prematurely. When I run the program now, it does send an error message to the console, but I cannot read what it says because the console is refreshed with the web page.

Answer 1

It feels like you could use more React to make your life easier here.

You don't have to use the form's onSubmit event. You could just add an onClick handler to the button. In that function, you could do all the comparing you want and, whrn you're ready, it can do the submitting logic too.

If you wanted to compare the form's values, you might want to keep those values in state. To do so though, you would need onChange functions on each of the form elements to update the state as the user provides input.

As I didn't see much React code in your example, I took the liberty of writing some out. Hopefully it will help you:

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