现在,我使用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)];