Я пытаюсь использовать const useStyles в компоненте класса

Question

Сейчас я делаю проект с React Framework и библиотекой Material-UI.

Мои шаблоны из https://material-ui.com/getting-started/templates/ -> Sing In

Я изменяю компонент из компонента функции в компонент класса, чтобы использовать 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)];

Когда я редактирую экспорт по умолчанию в

export default makeStyles(useStyles)(Signin);

Это все еще ошибка.

Answer 1

Да, это будет ошибка. Есть (очень хакерские) способы заставить хуки работать с классами, но вам не нужно использовать класс только для того, чтобы иметь состояние. намного проще просто использовать компонент функции, чем пытаться взломать 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)];