Javascript 我尝试在类组件中使用constusestyles

现在，我正在使用React框架和Material UI的库执行一个项目

我的模板来自->唱入

我将组件从函数组件更改为类组件以使用this.state。因为我想从键盘上获取值。但我不能

这是错误的

这是我的密码

const useStyles = makeStyles(theme => ({
   root: {
      flexGrow: 1,
   },
}));

class Signin extends Component {
   constructor(props) {
       super(props);
       this.state = {
          username: "",
          password: "",
          redirectToReferrer: false,
          message: null
        }
   }
   render() {
      const { redirectToReferrer } = this.state;
      const { classes } = this.props;
      if (redirectToReferrer) return <Redirect to="/routebasic" />;
        return (
          <div className={classes.root}>
    }}
    Signin.propTypes = {
      classes: PropTypes.object.isRequired,
    };
    export default [connect(null, { ActSignin })(Signin),makeStyles(useStyles)(Signin)];

---

还是错误。

是的，它会出错。有很多非常简单的方法可以让钩子与类一起工作，但是您不需要使用类来获得状态。只使用一个函数组件要比尝试破解反应容易得多

我将组件从函数组件更改为类组件以使用this.state。因为我想从键盘上获取值

作为一个例子，我在这里猜测，因为我不知道上下文，我将对象拆分，而不是将其保留为单个值：

const Signin = ({ classes }) => {
   const [username, setUsername] = React.useState("kmitlclinic01");
   const [password, setPassword] = React.useState("54788");
   const [redirectToReferrer, setRedirectToReferrer] = React.useState(false);
   const [message, setMessage] = React.useState("kmitlclinic01");

   if (redirectToReferrer) return <Redirect to="/routebasic" />;
   return (
     <div className={classes.root}>
       {/* I assume some stuff goes here? */}
     </div>
   );
}

export default [connect(null, { ActSignin })(Signin),makeStyles(useStyles)(Signin)];

const Signin = ({ classes }) => {
   const [username, setUsername] = React.useState("kmitlclinic01");
   const [password, setPassword] = React.useState("54788");
   const [redirectToReferrer, setRedirectToReferrer] = React.useState(false);
   const [message, setMessage] = React.useState("kmitlclinic01");

   if (redirectToReferrer) return <Redirect to="/routebasic" />;
   return (
     <div className={classes.root}>
       {/* I assume some stuff goes here? */}
     </div>
   );
}

export default [connect(null, { ActSignin })(Signin),makeStyles(useStyles)(Signin)];