CODEWITHSUNDEEP
reactjs
NeoZoom.lua
NeoZoom.lua

Reputation: 2901

React custom functional component button to do form submit

I have a custom component RedirectButton, which is implemented with <button> with additional routing function provided by react-router-dom V5.

The following code won't trigger the handleSubmit, why?

return <div className="import-workspace box">
        <div style={{display: "flex", flexDirection: "column"}}>
            <form ref={formRef} onSubmit={handleSubmit}>
                <h1>Import Your Space</h1>
                <InputText ref={spaceIdRef}
                           label="space-id" init={spaceId}
                           onChange={value => setSpaceId(value)}/>
                <InputText ref={mapIdRef}
                           label="map-id" init={mapId}
                           onChange={value => setMapId(value)}/>
                <InputText ref={roomsRef} area
                           label="rooms" init={rooms}
                           onChange={value => setRooms(value)}/>
                <RedirectButton text="Start Discrimination" style={{background: "lightgreen"}}
                                to="/workspace-generator"
                                formRef={formRef}/>
            </form>
        </div>
    </div>

and if I changed the <RedirectButton> to simply <button>test</button> then the handleSubmit will be called, why?

import {Link, useLocation} from "react-router-dom";


const RedirectButton = ({text, to, style, onClick}) => {
    const { pathname } = useLocation()
    const { display, justifyContent, ...rest } = style

    return <Link to={to? to: pathname}
                 onClick={onClick}
                 style={{ textDecoration: "none", display, justifyContent }}>
        <button style={{ ...rest }}>
            {text}
        </button>
    </Link>
}

export default RedirectButton

Upvotes: 0

Views: 560

Answers (2)

Adrian Zielonka
Adrian Zielonka

Reputation: 115

and if I changed the to simply <button>test</button> then the handleSubmit will be called, why?

By default, in browsers other than Internet Explorer, <button /> has a type of "submit" which when wrapped inside a <form /> element will submit the form.

The following code won't trigger the handleSubmit, why?

The parent <Link /> component intercepts the mouse or keyboard event and prevents the event propagating down to the <button /> element

Upvotes: 1

Aniket K
Aniket K

Reputation: 434

Try adding type="submit" to the <button> element:

<button style={{ ...rest }} type="submit">
   {text}
</button>

Upvotes: 0

Related Questions