我想将这个组件拆分为由容器呈现的组件

Question

我不知道如何更改。

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { loginUser } from "../../../_actions/user_action";
import { withRouter } from "react-router-dom";
const LoginPage = (props) => {
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
const onEmailHandler = (event) => {
setEmail(event.currentTarget.value);
};
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value);
};
const onSubmitHandler = (event) => {
event.preventDefault();
let body = {
email: Email,
password: Password,
};
dispatch(loginUser(body)).then((response) => {
if (response.payload.loginSuccess) {
props.history.push("/");
} else {
alert("Error");
}
},[]);
};
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100vh",
}}
>
<form
style={{
display: "flex",
flexDirection: "column",
}}
onSubmit={onSubmitHandler}
>
<label>Email</label>
<input type="email" value={Email} onChange={onEmailHandler} />
<label>Password</label>
<input type="password" value={Password} onChange={onPasswordHandler} />
<br />
<button type="submit">Login</button>
</form>
</div>
);
};
export default withRouter(LoginPage);

我想将useState、onEmailHandler、onPasswordHandler和onSubmitHandler中的两个移到容器文件中。但是，若我把这些东西移到容器文件中，我就不能生成对调度数据至关重要的body对象。如何拆分此代码？

Answer 1

将所有状态和行为提升/提升到父/容器组件，并将状态值和处理程序传递到子/表示组件。

容器

const LoginContainer = (props) => {
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
const dispatch = useDispatch();
const onEmailHandler = (event) => {
setEmail(event.currentTarget.value);
};
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value);
};
const onSubmitHandler = (event) => {
event.preventDefault();
let body = {
email: Email,
password: Password
};
dispatch(loginUser(body)).then((response) => {
if (response.payload.loginSuccess) {
props.history.push("/");
} else {
alert("Error");
}
}, []);
};
return (
<LoginForm
Email={Email}
Password={Password}
onEmailHandler={onEmailHandler}
onPasswordHandler={onPasswordHandler}
onSubmitHandler={onSubmitHandler}
/>
);
};
export default withRouter(LoginContainer);

登录表单

const LoginForm = ({
onSubmitHandler,
Email,
onEmailHandler,
Password,
onPasswordHandler
}) => (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100vh"
}}
>
<form
style={{
display: "flex",
flexDirection: "column"
}}
onSubmit={onSubmitHandler}
>
<label>Email</label>
<input type="email" value={Email} onChange={onEmailHandler} />
<label>Password</label>
<input type="password" value={Password} onChange={onPasswordHandler} />
<br />
<button type="submit">Login</button>
</form>
</div>
);