如果嵌套在表单和div中的按钮重新呈现，则提交自动触发

Question

Developing a React JS web app, I've encountered a weird issue that is happening to me right now and can't find out why.

    getButtonAction() {
    const buttonEditar = <button className="btn_inform" type="button" name="button" onClick={this.toggleModoEdicion} >
                            <img src={icon_editar} alt="Editar" />
                            <p>Editar</p>
                        </button>;

    const buttonConfirmar = <button className="btn_inform" type="submit" >
                                <div className="icon">
                                    <img src={icon_tilde_violeta} alt="Confirmar" />
                                </div>
                                <p>Confirmar</p>
                            </button>;

    return !this.state.modo_edicion ? buttonEditar : buttonConfirmar;
}

If I put the form this way (notice where the button Action is):

    let imagenPerfil = isNullOrUndefined(this.state.imgPerfil) ? icon_user_ejemplo : this.state.imgPerfil;

    const headerContacto = this.state.tipo_usuario == 0 ? <h2> <span>Datos de contacto</span> </h2> : null;
    let buttonAction = this.getButtonAction();

    return (  
        <section id="box_r_usuarios">
            <form onSubmit={this.handleSubmit}>
                {buttonAction} <-- BUTTON ACTION
                <div className="top">
                    <div className="box">
                        <div className="avatar">
                            <InputImage img={imagenPerfil} name="imgPerfil" onChange={this.handleInputChange} disabled={!this.state.modo_edicion} />
                        </div>
                        <div className="box_info">
                            <div className="info">
                                <div className="icon">
                                    <img src={icon_membresia} alt="Membresía Premium" />
                                </div>
                                <p>Membresía Premium</p>
                            </div>
                            <div className="info">
                                <div className="icon">
                                    <img src={icon_nivel} alt="Nivel Intermedio" />
                                </div>
                                <p>Nivel Intermedio</p>
                            </div>
                        </div>
                    </div>
                    <div className="box">
                        <div className="right">
                            <button className="btn_inform" type="button">
                                <div className="icon">
                                    <img src={icon_tutor} alt="Tutor Asignado" />
                                </div>
                                <p>Tutor Asignado</p>
                            </button>
                        </div>
                    </div>

                </div>
 etc etc

The form behaves as expected.

However if put the buttonAction as in here:

    let imagenPerfil = isNullOrUndefined(this.state.imgPerfil) ? icon_user_ejemplo : this.state.imgPerfil;

    const headerContacto = this.state.tipo_usuario == 0 ? <h2> <span>Datos de contacto</span> </h2> : null;
    let buttonAction = this.getButtonAction();

    return (  
        <section id="box_r_usuarios">
            <form onSubmit={this.handleSubmit}>
                <div className="top">
                    <div className="box">
                        <div className="avatar">
                            <InputImage img={imagenPerfil} name="imgPerfil" onChange={this.handleInputChange} disabled={!this.state.modo_edicion} />
                        </div>
                        <div className="box_info">
                            <div className="info">
                                <div className="icon">
                                    <img src={icon_membresia} alt="Membresía Premium" />
                                </div>
                                <p>Membresía Premium</p>
                            </div>
                            <div className="info">
                                <div className="icon">
                                    <img src={icon_nivel} alt="Nivel Intermedio" />
                                </div>
                                <p>Nivel Intermedio</p>
                            </div>
                        </div>
                    </div>
                    <div className="box">
                        <div className="right">
                            <button className="btn_inform" type="button">
                                <div className="icon">
                                    <img src={icon_tutor} alt="Tutor Asignado" />
                                </div>
                                <p>Tutor Asignado</p>
                            </button>
                {buttonAction}<-- This is where the BUTTON ACTION is now
                        </div>
                    </div>

                </div>
etc etc

When button action is re rendered because of the change of state, the submit of the form is triggered.

So if I set the state to modo_edicion : true, then the button gets re rendered, and the form is submited without any action from the user. Drove me nuts this last hour and

I hope I'm explaining myself clearly.

Answer 1

I am not sure if I understood your problem. but here we go...

Have you noticed that just one of the buttons are type "submit"? Are you forgetting the close tag ?

if nothing of the above make sence, try to remove the onsubmit event and call the method where you need it.

Answer 2

Thanks all of you!

Solved it making separate methods for both buttons and hiding them according to the state. Weird issue but the workaround works.