防止表单在 React 中从父级重新加载到子级

Question

I'm trying to pass data from my child component (who has the form), to the parent component using a callback function, but I can't use the event.preventDefault() from the parent function, my code is the next:

function handleSubmit (event) {
    console.log("Done")
    event.preventDefault()
}

<LoginForm onFormSubmit={handleSubmit}/>

And this is my child form component:

const [currentUser, setCurrentUser] = useState({
    username: "",
    password: ""
})

function handleChange(event) {
    const {name, value} = event.target

    setCurrentUser(prevValue => {
        if (name === "email") {
            return {
                username: value,
                password: prevValue.password
            };
        } else if (name === "password") {
            return {
                username: prevValue.username,
                password: value
            };
        }
    })
}

    <form
         onSubmit={() => props.onFormSubmit()}
         className={classes.form}>
                <TextField
                    onChange={handleChange}
                    id="email"
                    label="Email Address"
                    name="email"
                    value={currentUser.username}
                />
                <TextField
                    onChange={handleChange}
                    id="password"
                    label="Password"
                    name="password"
                    type="password"
                    value={currentUser.password}
                />
                <Button
                    type="submit"
                >
    </form>

So my question is, how can I prevent the form from reloading, and how can I pass the currentUser values to the parent component, thanks in advance!

Answer 1

As parent re-renders it will cause child to re-render. You can prevent this using React.memo() it does shallow comparison with previous & incoming props and determine whether to render or not.

Example child component:

const ChildComp = React.memo(
   ({pristineForm}) => <div>Child component</div>
)

pristineForm is initially true if you make it false after updating parent state child will not re-render.

Answer 2

You are not passing event e from child component:

<form
  onSubmit={e => {
    // e.preventDefault(); 
    props.onFormSubmit(); // You didn't pass e
  }}
>
  <TextField
    onChange={handleChange}

    // .... 

</form>

but expecting it in parent's handler:

function handleSubmit (event) {
    console.log("Done")
    event.preventDefault()
}

So, either pass the event e from child or use e.preventDefault() in the child itself as shown above. And to pass the form data back to parent, you should pass currentUser and handle it in parent.

  onSubmit={e => {
    e.preventDefault();
    props.onFormSubmit(currentUser);
  }}

In parent:

function handleSubmit (data) {
    console.log("Done", data)
    // do something with data, e.g. make API call
}