我想将此组件拆分为由容器渲染的组件

如何解决我想将此组件拆分为由容器渲染的组件

我不知道该如何更改。

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中的两个移到容器文件中。但是，如果将这些内容移到容器文件中，则无法使主体对象成为分发数据所必需的对象。如何拆分此代码？

解决方法

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

容器

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>
);