onSubmit event handler not working in Reactjs form

Question

I am new to react and have this form:

class CustomForm extends React.Component {

    handleFormSubmit = (e) => {
        e.preventDefault();
        const title = e.target.elements.title.value;
        const content = e.target.elements.content.value;
        console.log(title, content)
    }

    render() {
        return (
            <div>
                <Form onSubmit={ this.handleFormSubmit }>
                    <FormItem label='Title'>
                        <Input name='title' placeholder='Put a title here' />
                    </FormItem>
                    <FormItem label='Content'>
                        <Input name='content' placeholder='Enter some content' />
                    </FormItem>
                    <FormItem>
                        <Button type='primary' htmlType='submit'>Submit</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}

The form is not submitting anything/nothing in console log. I tried it with onSubmitCapture and that seems to work. How do I fix this?

All your components are custom, maybe use standard components ref: reactjs.org/docs/forms.html — developer
– developer, Commented May 22, 2020 at 10:30

Ashish · Accepted Answer · 2020-05-22 10:30:32Z

3

From your code it looks like you are using some custom component <Form>.. this is not the normal <form> because custom <Form> component might not have the prop onSubmit. Go through the documentation of the component you are using.

answered May 22, 2020 at 10:30

Ashish

4,3801 gold badge19 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Palash Gupta · Accepted Answer · 2020-05-22 10:30:22Z

1

button with type='submit' will trigger the form onSubmit Handler

answered May 22, 2020 at 10:30

Palash Gupta

3983 silver badges10 bronze badges

Comments

Sahil Sharma · Accepted Answer · 2020-05-22 10:40:28Z

You need to bind the event handlers in the constructor in order to work. Read more here https://reactjs.org/docs/handling-events.html:

class CustomForm extends React.Component {    
    constructor(props) {
     super(props)

      this.handleFormSubmit = this.handleFormSubmit.bind(this)
     }

    handleFormSubmit = (e) => {
        e.preventDefault();
        const title = e.target.elements.title.value;
        const content = e.target.elements.content.value;
        console.log(title, content)
    }

    render() {
        return (
            <div>
                <Form onSubmit={ this.handleFormSubmit }>
                    <FormItem label='Title'>
                        <Input name='title' placeholder='Put a title here' />
                    </FormItem>
                    <FormItem label='Content'>
                        <Input name='content' placeholder='Enter some content' />
                    </FormItem>
                    <FormItem>
                        <Button type='primary' htmlType='submit'>Submit</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}

Collectives™ on Stack Overflow

onSubmit event handler not working in Reactjs form

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related