现在,我使用React Framework和Material-UI的库来做一个项目。

我的模板来自https://material-ui.com/getting-started/templates/->唱歌

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

错了

enter image description here

这是我的代码

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


当我编辑导出默认为

export default makeStyles(useStyles)(Signin);


仍然是错误。

最佳答案

是的,它会出错。有很多方法可以使钩子与类一起工作,但是您不必仅使用类就可以拥有状态。只使用功能组件比尝试破解React要容易得多。


  我将组件从功能组件更改为类组件以使用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)];

09-17 15:02
查看更多