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

Question

我正在尝试使用回调函数将数据从子组件（具有表单）传递到父组件，但是我无法使用父函数中的event.preventDefault（），我的代码是下一个：

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

<LoginForm onFormSubmit={handleSubmit}/>

这是我的子窗体组件：

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>

所以，我的问题是，如何防止重新加载表单，以及如何将currentUser值传递给父组件，请先感谢！

Answer 1

当父母重新渲染时，将导致孩子重新渲染。您可以使用React.memo()防止它与上一个和传入的props进行浅层比较，并确定是否进行渲染。

示例子组件：

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

[pristineForm最初是true，如果在更新父状态子代后将其设为false，则不会重新呈现。

Answer 2

您没有从子组件传递事件e：

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

    // .... 

</form>

但希望在父母的处理程序中使用它：

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

因此，要么通过子级传递事件e，要么在子级本身中使用e.preventDefault()，如上所示。并将表单数据传递回父级，您应该传递currentUser并在父级中进行处理。

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

在父母中：

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