Javascript 如何在React.js中创建登录表单和响应？

我正在使用React.js、React引导和javascript

我正在尝试创建一个登录页面。因此，当用户键入url时：

www.example.com/

-当他们输入

www.example.com/linechart

除非用户登录，在

www.example.com/linechart

中键入时，用户将看到一个折线图

我的登录表单如下所示

<Form className="login-form p-3" onSubmit={handleSubmit}>
            <Form.Group controlId="formUsername">
                <Form.Label>Username</Form.Label>
                <Form.Control 
                    type="text" 
                    placeholder="Username"
                    onChange={e => setUsername(e.target.value)}
                />
            </Form.Group>

            <Form.Group>
                <Form.Label>Password</Form.Label>
                <Form.Control 
                    type="password"
                    onChange={e => setPassword(e.target.value)}
                />
            </Form.Group>

            <Button 
                className="mt-5 mb-3" 
                variant="primary" 
                disabled={!validateForm()}
                type="submit"
                >
                Submit
            </Button>
        </Form>

function handleSubmit(event){
        event.preventDefault()
        let accountExists = false

        //checks if account exists
        for(let i = 0; i < mockData.userName.length; i++){
            let userNameExists =  (mockData.userName[i] === username) ? true: false;
            let passwordExists = (mockData.password[i] === password) ? true: false;

            if(passwordExists && userNameExists){
                accountExists = true
            }
        }
        if(accountExists){
            props.updateAuthenticationAndRedirect()
            debugger
        }
    }

constructor(props){
    super(props)
    this.state = {
      isAuthenticated:false,
      redirectURL:"line-chart"
    }
    this.updateAuthenticationAndRedirect = this.updateAuthenticationAndRedirect.bind(this)
  }

  updateAuthenticationAndRedirect(){
    this.setState( (state, props) => ( { isAuthenticated:true } ), () =>{
      return <Redirect  to="/line-chart" />
    })
  }

  render(){
    return(
      <Router>
        <Switch>
          <Route 
            exact 
            path="/line-chart"
            render={ () => (this.state.isAuthenticated) ? <LineChart /> : <Redirect to="/" /> }
          />

          <Route exact path="/" >
            <Login 
              authenticated={this.state.isAuthenticated}
              updateAuthenticationAndRedirect={this.updateAuthenticationAndRedirect}
              redirectURL={this.state.redirectURL}
            />
          </Route>
        </Switch>
      </Router>
    )
  }

用户名
setUsername（e.target.value）}
/>
密码
setPassword（e.target.value）}
/>
提交

我的句柄提交看起来像这样

<Form className="login-form p-3" onSubmit={handleSubmit}>
            <Form.Group controlId="formUsername">
                <Form.Label>Username</Form.Label>
                <Form.Control 
                    type="text" 
                    placeholder="Username"
                    onChange={e => setUsername(e.target.value)}
                />
            </Form.Group>

            <Form.Group>
                <Form.Label>Password</Form.Label>
                <Form.Control 
                    type="password"
                    onChange={e => setPassword(e.target.value)}
                />
            </Form.Group>

            <Button 
                className="mt-5 mb-3" 
                variant="primary" 
                disabled={!validateForm()}
                type="submit"
                >
                Submit
            </Button>
        </Form>

function handleSubmit(event){
        event.preventDefault()
        let accountExists = false

        //checks if account exists
        for(let i = 0; i < mockData.userName.length; i++){
            let userNameExists =  (mockData.userName[i] === username) ? true: false;
            let passwordExists = (mockData.password[i] === password) ? true: false;

            if(passwordExists && userNameExists){
                accountExists = true
            }
        }
        if(accountExists){
            props.updateAuthenticationAndRedirect()
            debugger
        }
    }

constructor(props){
    super(props)
    this.state = {
      isAuthenticated:false,
      redirectURL:"line-chart"
    }
    this.updateAuthenticationAndRedirect = this.updateAuthenticationAndRedirect.bind(this)
  }

  updateAuthenticationAndRedirect(){
    this.setState( (state, props) => ( { isAuthenticated:true } ), () =>{
      return <Redirect  to="/line-chart" />
    })
  }

  render(){
    return(
      <Router>
        <Switch>
          <Route 
            exact 
            path="/line-chart"
            render={ () => (this.state.isAuthenticated) ? <LineChart /> : <Redirect to="/" /> }
          />

          <Route exact path="/" >
            <Login 
              authenticated={this.state.isAuthenticated}
              updateAuthenticationAndRedirect={this.updateAuthenticationAndRedirect}
              redirectURL={this.state.redirectURL}
            />
          </Route>
        </Switch>
      </Router>
    )
  }

函数handleSubmit（事件）{
event.preventDefault（）
让accountExists=false
//检查帐户是否存在
for（设i=0；i

我的应用程序看起来像这样

<Form className="login-form p-3" onSubmit={handleSubmit}>
            <Form.Group controlId="formUsername">
                <Form.Label>Username</Form.Label>
                <Form.Control 
                    type="text" 
                    placeholder="Username"
                    onChange={e => setUsername(e.target.value)}
                />
            </Form.Group>

            <Form.Group>
                <Form.Label>Password</Form.Label>
                <Form.Control 
                    type="password"
                    onChange={e => setPassword(e.target.value)}
                />
            </Form.Group>

            <Button 
                className="mt-5 mb-3" 
                variant="primary" 
                disabled={!validateForm()}
                type="submit"
                >
                Submit
            </Button>
        </Form>

function handleSubmit(event){
        event.preventDefault()
        let accountExists = false

        //checks if account exists
        for(let i = 0; i < mockData.userName.length; i++){
            let userNameExists =  (mockData.userName[i] === username) ? true: false;
            let passwordExists = (mockData.password[i] === password) ? true: false;

            if(passwordExists && userNameExists){
                accountExists = true
            }
        }
        if(accountExists){
            props.updateAuthenticationAndRedirect()
            debugger
        }
    }

constructor(props){
    super(props)
    this.state = {
      isAuthenticated:false,
      redirectURL:"line-chart"
    }
    this.updateAuthenticationAndRedirect = this.updateAuthenticationAndRedirect.bind(this)
  }

  updateAuthenticationAndRedirect(){
    this.setState( (state, props) => ( { isAuthenticated:true } ), () =>{
      return <Redirect  to="/line-chart" />
    })
  }

  render(){
    return(
      <Router>
        <Switch>
          <Route 
            exact 
            path="/line-chart"
            render={ () => (this.state.isAuthenticated) ? <LineChart /> : <Redirect to="/" /> }
          />

          <Route exact path="/" >
            <Login 
              authenticated={this.state.isAuthenticated}
              updateAuthenticationAndRedirect={this.updateAuthenticationAndRedirect}
              redirectURL={this.state.redirectURL}
            />
          </Route>
        </Switch>
      </Router>
    )
  }

构造函数（道具）{
超级（道具）
此.state={
I认证：错误，
重定向URL：“折线图”
}
this.updateAuthenticationAndRedirect=this.updateAuthenticationAndRedirect.bind（this）
}
UpdateAuthenticationandDirect（）{
this.setState（（state，props）=>（{isAuthenticated:true}），（）=>{
返回
})
}
render（）{
返回(
（this.state.isAuthenticated）？：}
/>
)
}

---

我很不确定从哪里开始，如果您能提供任何帮助，我们将不胜感激，谢谢

我想您的问题出在updateAuthenticateinandredirect（）方法上。 从不在呈现方法中的javascript函数返回JSX元素：

return

为了使您的实现正常工作，您还需要在登录路由中添加如下检查：

<Route
  exact
  path="/"
  render={() => {
    !this.state.isAuthenticated ?
    <Login
      authenticated={this.state.isAuthenticated}
      updateAuthenticationAndRedirect={this.updateAuthenticationAndRedirect}
      redirectURL={this.state.redirectURL}
    /> :
    <Redirect to="/line-chart" />
  }
>
  <Login
    
  />
</Route>

{
！this.state.isAuthenticated？
:
}
>

不过我不确定这是不是正确的方法。我通常使用一种不同的反应