Блог

Главная - Вопросы по программированию - обработка событий в react

обработка событий в react

#javascript #reactjs #authentication #react-router

Вопрос:

Мне нужно создать страницу входа в систему, когда я нажимаю кнопку «Отправить», она должна перейти на страницу панели мониторинга. Ниже приведен мой код, в чем в нем проблема. Когда я сообщаю подробности на странице входа в систему и нажимаю кнопку войти, детали исчезают и не переходят на панель мониторинга.

 import React, { Component, useState  } from "react";
import axios from 'axios';
import { setUserSession } from '../utils/common';
function Login(props) {
    const username = useFormInput('');
  const password = useFormInput('');
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
 
  // handle button click of login form
  const handleLogin = () => {
    props.history.push('/dashboard');
  }
      

        return (
            <form>
                <h3>Sign In</h3>

                <div className="form-group">
                    <label>Email address</label>
                    <input type="email" className="form-control" placeholder="Enter email" />
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" className="form-control" placeholder="Enter password" />
                </div>

                <div className="form-group">
                    <div className="custom-control custom-checkbox">
                        <input type="checkbox" className="custom-control-input" id="customCheck1" />
                        <label className="custom-control-label" htmlFor="customCheck1">Remember me</label>
                    </div>
                </div>

                
                {error amp;amp; <><small style={{ color: 'red' }}>{error}</small><br /></>}<br />
                <input  type="button" className="btn btn-primary btn-block" value={loading ? 'Loading...' : 'Sign-in'} onClick={handleLogin} disabled={loading} /><br />
                <p className="forgot-password text-right">
                    Forgot <a href="#">password?</a>
                </p>
            </form>
        );
        }

        const useFormInput = initialValue => {
            const [value, setValue] = useState(initialValue);
           
            const handleChange = e => {
              setValue(e.target.value);
            }
            return {
              value,
              onChange: handleChange
            }
          }
          
           
          export default Login;

Ответ №1:

У вас есть определенный маршрут для /dashboard . Все работало со мной в песочнице кода без настройки маршрутизатора react. Код блока питания показан ниже

 <Switch>
  <Route path="/dashboard">
    <DashboardComponent />
  </Route>
</Switch>

Комментарии:

1. Где мне нужно добавить этот фрагмент кода? В «Ручном учете»?

2. После добавления фрагмента в мой login.js файл, теперь навигация не происходит. Но когда я нажимаю кнопку «Отправить», данные для входа остаются!

Метки: