我创建了一个简单的登录函数,一旦用户登录,他就被重定向到另一个页面。然后,我想用表单对话框更改登录表单。问题就在这里。登录对话框可以工作,但是当我输入用户名和密码时,我不是发送到另一个页面,而是发送到同一个登录页面:/。
以下是代码:
Login.jsx:
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      islogged: false,
      loginSettings: {
        lUsername: "",
        lPassword: ""
      }
    };
  }
  handleInput = (event) => {
    let loginSettingsNew = { ...this.state.loginSettings };
    let val = event.target.value;
    loginSettingsNew[event.target.name] = val;
    this.setState({
      loginSettings: loginSettingsNew
    });
  };
  login = (event) => {
    let lUsername = this.state.loginSettings.lUsername;
    let lPassword = this.state.loginSettings.lPassword;
    if (lUsername === "admin" && lPassword === "password") {
      localStorage.setItem("token", "T");
      this.setState({
        islogged: true
      });
    } else {
      console.log("Erreur");
    }
    event.preventDefault();
  };
  render() {
    if (localStorage.getItem("token")) {
      return <Redirect to="/" />;
    }
    return (
      <div className="Login">
        <Dialog handleInput={this.handleInput} login={this.login} />
        <p>Username: admin - Password: password</p>
      </div>
    );
  }
}Dialog.js:
export default function FormDialog() {
  const [open, setOpen] = React.useState(false);
  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Login</DialogTitle>
        <DialogContent>
          <form onSubmit={this.login}>
            <label>
              <span>Username</span>
              <input name="lUsername" type="text" onChange={this.handleInput} />
            </label>
            <label>
              <span>Password</span>
              <input name="lPassword" type="password" onChange={this.handleInput}/>
            </label>
            <Button onClick={handleClose} color="primary">Cancel</Button>
            <Button type="submit" value="submit" color="primary">Login</Button>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}我还创建了代码的沙箱:https://codesandbox.io/s/react-login-auth-forked-r06ht
我认为问题来自表单对话框,该对话框无法设置登录函数的islogged状态。我试了很多东西,但都没有用,所以我想请你帮忙。
我事先感谢任何愿意花时间帮助我的人。
发布于 2020-11-02 21:09:54
我注意到您的Login组件是一个类,而子FormDialog组件是一个使用钩子的函数组件。这本身没有什么问题--特别是当您开始使用所有类组件的应用程序,并且正在缓慢地转换您的组件时。但是我在这里发现了一些混淆,因为从某种意义上说,您的函数组件似乎假设它是一个类。当你需要做一些不同的事情时。
具体来说,您在函数组件中引用了this.login --但这是毫无意义的。login作为道具传入。在类组件中,您可以将其引用为this.props.login。这在函数组件中不起作用--但this.login不是替代品。实际上,this将倾向于undefined,因此这甚至会产生一个错误。即使不是,也不对。
您所需要做的就是使用函数组件的参数--这就是函数组件中props对象“存在”的地方。你碰巧不使用任何参数来忽略它--但你不必这么做。
总之,你需要做的是:
export default function FormDialog(props)取代
export default function FormDialog()props.login取代
this.login对于使用this引用的所有其他道具,
https://stackoverflow.com/questions/64653194
复制相似问题