表单对话框不设置状态

Question

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

代码如下：

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

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

Answer 1

我注意到你的 Login 组件是一个 class，而子 FormDialog 组件是一个使用 Hooks 的函数组件。这本身并没有什么问题 - 特别是如果您开始使用所有 class 组件的应用程序并且正在慢慢转换您的组件。但是我发现这里有些混乱，因为从某种意义上说，您的函数组件似乎假定它是 class。当您需要做一些不同的事情时。

具体来说，您在函数组件中引用了 this.login - 但这是没有意义的。 login 作为道具传入。在 class 组件中，您可以将其引用为 this.props.login。这在功能组件中不起作用 - 但 this.login 不是替代品。事实上 this 往往会是 undefined 所以这甚至会产生错误。就算不是，也不对。

您需要做的就是使用函数组件的参数 - 这是 props 对象在函数组件中“存在”的地方。您碰巧通过不使用任何参数来忽略它 - 但您不必这样做。

所以简而言之，你需要做的是：

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

Answer 2

好的，一切都解决了。在您的 App.js 中，您没有使用此路径 =“/”重定向到的主页组件。我创建了一个名为 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

表单对话框不设置状态

Form dialog don't set state

javascript

dialog

event-handling

setstate

reactjs