我正在尝试使用回调函数将数据从子组件(具有表单)传递到父组件,但是我无法使用父函数中的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值传递给父组件,请先感谢!
当父母重新渲染时,将导致孩子重新渲染。您可以使用React.memo()
防止它与上一个和传入的props
进行浅层比较,并确定是否进行渲染。
示例子组件:
const ChildComp = React.memo(
({pristineForm}) => <div>Child component</div>
)
[pristineForm
最初是true
,如果在更新父状态子代后将其设为false
,则不会重新呈现。
您没有从子组件传递事件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
}