onSubmit triggers on every change, basic form did not

Question

I'm converting a project to use Semantic-UI-React and a form is triggering on every change. The old form looked like this and worked as intended:

<div className="entryForm">      
              <form onSubmit={this.handleSubmit}> 
                <span className="formLabel">Location:</span>
                <input type='text' name="location" placeholder="Location" 
                   onChange={this.handleChange} autoComplete="off" /><br/>
                Date Activity:
                <input type='text' name="activity" placeholder="Activity" 
                   onChange={this.handleChange} autoComplete="off"/><br/>
                Cuisine:
                <input type='text' name="cuisine" placeholder="Cuisine" 
                   onChange={this.handleChange} autoComplete="off"/>
                   <button type="submit" value="submit" hidden="hidden"/>
              </form></div>

The Semantic form looks like this and displays both SUBMIT and HELP on every change in the form:

<Form onSubmit={console.log("SUBMIT")}
            onChange={console.log("HELP")}>

                <Form.Field inline>
                        <label>Location:</label>
                    <Input name='location' 
                           placeholder='Enter a neighborhood here' 
                           onChange={this.handleChange} 
                           autoComplete="off"/>
                </Form.Field>
                <Form.Field inline>
                        <label>Activity:</label>
                    <Input name='activity' 
                           placeholder='Enter a a fun activity' 
                           onChange={this.handleChange} 
                           autoComplete="off"/>
                </Form.Field>
                <Form.Field inline>
                        <label>Cuisine:</label>
                    <Input name='cuisine' 
                           placeholder='What do you want to eat' 
                           onChange={this.handleChange} 
                           autoComplete="off"/>
                </Form.Field>
            </Form>

What's going on?

Should I not include that the Semantic-React-UI in title @Rob? Basic HTML form was working, the change to sru is providing the problem — ekap, Jun 23 '19 at 03:34
It should be `onSubmit(() => console.log("SUBMIT"))`. Same thing for `onChange`. — SILENT, Jun 23 '19 at 03:47
@SILENT, that and adding a hidden submit button did it, thank you — ekap, Jun 23 '19 at 04:04

score 0 · Answer 1 · edited Jun 23 '19 at 11:26

0

onSubmit={(() => console.log("SUBMIT"))}

That fixed it as well as adding a submit button got it working

edited Jun 23 '19 at 11:26

Rob

13,342
26
40
60

answered Jun 23 '19 at 06:41

ekap

1
2

onSubmit triggers on every change, basic form did not

1 Answers1