Reactjs 防止在React中从父窗体重新加载到子窗体
我试图使用回调函数将数据从我的子组件（具有表单）传递到父组件，但我无法使用父函数中的event.preventDefault（），下面是我的代码：Reactjs 防止在React中从父窗体重新加载到子窗体,reactjs,Reactjs,我试图使用回调函数将数据从我的子组件（具有表单）传递到父组件，但我无法使用父函数中的event.preventDefault（），下面是我的代码： function handleSubmit (event) { console.log("Done") event.preventDefault() } <LoginForm onFormSubmit={handleSubmit}/> 函数handleSubmit（事件）{ 控制台日志（“完成”） event.prev
function handleSubmit (event) {
console.log("Done")
event.preventDefault()
}
<LoginForm onFormSubmit={handleSubmit}/>
函数handleSubmit（事件）{
控制台日志（“完成”）
event.preventDefault（）
}
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>
const ChildComp = React.memo(
({pristineForm}) => <div>Child component</div>
)
<form
onSubmit={e => {
// e.preventDefault();
props.onFormSubmit(); // You didn't pass e
}}
>
<TextField
onChange={handleChange}
// ....
</form>
const[currentUser，setCurrentUser]=useState({
用户名：“”，
密码：“
})
函数句柄更改（事件）{
常量{name，value}=event.target
setCurrentUser（prevValue=>{
如果（姓名=“电子邮件”）{
返回{
用户名：value，
密码：prevValue.password
};
}else if（名称==“密码”）{
返回{
用户名：prevValue.username，
密码：value
};
}
})
}
props.onFormSubmit（）}
className={classes.form}>
所以我的问题是，如何防止表单重新加载，以及如何将currentUser值传递给父组件，提前感谢 当父对象重新渲染时，将导致子对象重新渲染。您可以使用
React.memo（）道具进行浅层比较，并确定是否渲染
示例子组件：
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>
const ChildComp = React.memo(
({pristineForm}) => <div>Child component</div>
)
<form
onSubmit={e => {
// e.preventDefault();
props.onFormSubmit(); // You didn't pass e
}}
>
<TextField
onChange={handleChange}
// ....
</form>
const ChildComp=React.memo(
（{pristineForm}）=>子组件
)
pristineForm
最初为true
如果在更新父状态后将其设置为false
，则子状态不会重新渲染。当父状态重新渲染时，将导致子状态重新渲染。您可以使用React.memo（）
来防止这种情况，它会与以前的和传入的道具进行浅层比较，并确定是否渲染
示例子组件：
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>
const ChildComp = React.memo(
({pristineForm}) => <div>Child component</div>
)
<form
onSubmit={e => {
// e.preventDefault();
props.onFormSubmit(); // You didn't pass e
}}
>
<TextField
onChange={handleChange}
// ....
</form>
const ChildComp=React.memo(
（{pristineForm}）=>子组件
)
pristineForm
最初为true
如果在更新父状态后将其设置为false
，则子状态不会重新呈现。您没有从子组件传递事件e
：
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>
const ChildComp = React.memo(
({pristineForm}) => <div>Child component</div>
)
<form
onSubmit={e => {
// e.preventDefault();
props.onFormSubmit(); // You didn't pass e
}}
>
<TextField
onChange={handleChange}
// ....
</form>
因此，要么从子级传递事件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
}
您没有从子组件传递事件e
：
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>
const ChildComp = React.memo(
({pristineForm}) => <div>Child component</div>
)
<form
onSubmit={e => {
// e.preventDefault();
props.onFormSubmit(); // You didn't pass e
}}
>
<TextField
onChange={handleChange}
// ....
</form>
因此，要么从子级传递事件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
}