表单对话框未设置状态

如何解决表单对话框未设置状态

我创建了一个简单的登录功能，一旦用户登录，他就会被重定向到另一个页面。然后，我想使用表单对话框更改登录表单。问题就在这里。登录对话框有效，但是当我输入用户名和密码时，我不会发送到另一个页面，而是发送到同一登录页面：/。

代码如下：

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状态的表单对话框中。我尝试了很多事情，但没有任何效果，所以我想请一些帮助。

我先感谢任何愿意花时间帮助我的人。

解决方法

我注意到您的Login组件是一个类，而子FormDialog组件是使用Hooks的功能组件。这本身没有任何问题-尤其是如果您从使用所有类组件的应用程序开始并且正在缓慢地转换组件。但是我在这里发现了一些困惑，因为从某种意义上说，您的函数组件似乎假定它是一个类。当您需要做一些不同的事情时。

具体来说，您在函数组件中引用了this.login-但这毫无意义。 login作为道具传递。在类组件中，您将其引用为this.props.login。这在功能组件中不起作用-但是this.login不能替代。实际上this往往是undefined，因此这甚至会产生错误。即使不是，也不正确。

您需要做的就是利用函数组件的参数-这是props对象在函数组件中的“住处”。您碰巧不使用任何参数而忽略了它-但您不必这样做。

因此，简而言之，您需要做的是：

将export default function FormDialog()替换为export default function FormDialog(props)
将this.login替换为props.login
重复2），以使用this
引用的所有其他道具

确定所有问题。在您的App.js中，您没有使用此路径=“ /”重定向到的home组件。我创建了一个名为home.js的新组件。为您整理路线。

<Route path="/login" component={Login} />
<ProtectedRoute path="/dashboard" component={Dashboard} />
<Route exact path="/" component={Home} />

请检查您的代码沙盒https://codesandbox.io/s/react-login-auth-forked-24m8e?file=/src/App.js

表单对话框未设置状态

如何解决表单对话框未设置状态

解决方法

相关推荐