表单对话框不设置状态答案

【问题标题】：Form dialog don't set state表单对话框不设置状态
【发布时间】：2020-11-02 20:54:48
【问题描述】：

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

代码如下：

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

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

【问题讨论】：

标签： javascript reactjs dialog event-handling setstate

【解决方案1】：

我注意到您的 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
对您使用 this 引用的所有其他道具重复 2)

【讨论】：

他们避免了有用的“未定义属性”错误，因为组件是使用 function 关键字声明的，而 this 指的是 window。如果他们使用了箭头函数，它就会坏掉，反而更容易追踪。
即便如此，this 在严格模式之外也只能是window。我认为 ES6 模块（由于export default 显然在此处使用）强制执行严格模式 - 但这不是我了解太多的东西，只是以为我在某个地方看到过。（需要明确的是，您应该在任何地方都使用严格模式，即使您必须故意输入use strict，这就像拥有一个稍微理智的JS子集。）

【解决方案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

【讨论】：