React - Form submission canceled because the form is not connected

Question

I want to get the value of input after submitting the form but code gives me the error - 'Form submission canceled because the form is not connected'. I know that if I change the button type from submit to button it will work, but I need submit method because on button click the other action is written and dont want to write code inside onclick function

    updateItem(e) {
        // console.log(this.input.value);
        console.log(2222222222);
        e.preventDefault();

    }

    render() {
        return (
            <div className='wrapper'>
                <form onSubmit={this.updateItem}>
                    <input className='input'
                        type="text"
                        defaultValue={this.props.defValue}
                    // ref={(value) => {
                    //     this.input = value
                    // }}
                    />
                    <button type="submit" 
                            className='submitButton' 
                            onClick{this.props.editItem}>Update
                     </button>
                </form>
            </div>
        );
    }

Answer 1

Same error, but now with 2 buttons (in a Login form) :

<Button primary id="button_submit" type="submit">Log in</Button>
<Button onClick={onClickForgotPassword}>Forgot your password?</Button>

The onSubmit looks like this:

const onSubmit = data => {
    props.onLoginStart(data);
};

And the onClickForgotPassword was initially like this:

const onClickForgotPassword = () => {
    history.push('/auth/forgotpassword');
};

I also got the same error.

Solved it by adding the event.preventDefault to the onClickForgotPassword:

 const onClickForgotPassword = (event) => {
        event.preventDefault();
        history.push('/auth/forgotpassword');
 };

And now the message is gone.

Answer 2

your form have an onSubmit handler, having a button with type='submit' and onClick is wrong, remove onClick prop and let the form onSubmit handler do submission

Answer 3

what you want to do with this condition. because if you make that button type submit then onclick is not worthy. because form submit function will trigger. so you should do one thing. either remove onclick from that button or write both code in one function.

   <form onSubmit={this.updateItem}>
       <input className='input' type="text"defaultValue={this.props.defValue} />
       <button type="submit" className='submitButton'>Update</button>
   </form>

   updateItem = (event) => {
       //do your onsubmit work

       // do your button click work
   }

Answer 4

I think all of these answers are wrong!. Here is what you should do.

since your form will be submitted with the onSubmit action then this type="submit" is what it is looking for within the form. Adding multiple buttons will trigger this warning since multiple actions are happening within the form. To fix that all you need to do is define a type to the 2nd or any other buttons ex type="button" this will fix your problem and you can add as many buttons as you like. Here is a full example.

1- Button #1

<button type="submit">My submit button</button>

2- Button #2 to infinity

<button type="button">My 2nd action</button>

I hope it helps anyone having this issue.