Реагировать на условный рендеринг на основе входа в систему и отправки формы

Question

Я пытаюсь инициировать условный рендеринг на основе отправки формы, которая отправляется на мой маршрутизатор узла, но я не получаю результат. Кнопки не скрывают содержимое «ReminderModel» и «Таблица напоминаний», и ничего не происходит, когда я отправляю форму входа. Я знаю, что это не лучший способ сделать это, но если кто-то может указать мне правильное направление, я буду признателен. Я предпочел бы не использовать другой плагин для реагирования и предпочел бы сделать это самостоятельно, чтобы избежать конфликтов обновлений и т. Д.

import React, { Component } from 'react';
import { Container, Button, Form, Col } from 'react-bootstrap';
import axios from 'axios';
import './App.css';
import ReminderTable from './components/reminderList';
import ReminderModal from './components/modal';
const redColor = {
  color: '#e52d2d'
}


class App extends Component {
    constructor(props){
      super(props);
    this.handleChange = this.handleChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.LoginButton = this.LoginButton.bind(this);
    this.UponLoggedIn = this.UponLoggedIn.bind(this);
    this.NotLoggedIn = this.NotLoggedIn.bind(this);
      this.state = {
          user:[],
          isLoggedIn:false,
          username:'',
          password:''
        };
    }

    handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  handleChange(e) {
    this.setState({
        [e.target.name]: e.target.value
    });
  }

  LoginButton = props => {
    return(
      <>
      <div id="status"></div>
        <Form
        className="loginForm"
          >
              <Form.Row>
              <Form.Group as={Col}>
              <Form.Label>Username</Form.Label>
                <Form.Control
                type="text"
                name="username"
                id="username"
                value={this.state.value}
                onChange={this.handleChange}
                >
                </Form.Control>
              </Form.Group>
              <Form.Group as={Col}>
                <Form.Label>Password</Form.Label>
                <Form.Control
                type="password"
                id="password"
                name="password"
                value={this.state.value}
                onChange={this.handleChange}
                />
              </Form.Group>
              </Form.Row>
              <Button className="btn btn-sm btn-light" onClick={this.onSubmit}>
                <i style={redColor} className="fas fa-sign-in-alt"></i> Login
              </Button>
        </Form>
      </>
    );
  }

 LogoutButton = props => {
    return(
      <>
      <Button className="btn btn-sm btn-light float-right" onClick={this.NotLoggedIn}>
        <i style={redColor} className="fas fa-sign-out-alt"></i> Logout
      </Button>

      </>
    )
  }

NotLoggedIn = props => {
    return(
      <>
      <h4 className="text-muted"> Please Log in</h4>
      {this.LoginButton()}
      </>
    )

  }

UponLoggedIn = props => {
    return(
      <>
      <ReminderModal />
      <p className="text-muted text-center">If new reminder does not show up immediently please refresh page</p>
      <ReminderTable />
      </>
    )

  }

  ViewScreen = props => {
    const isLoggedIn = props.isLoggedIn;
    if(isLoggedIn){
      return this.UponLoggedIn();
    }else {
      return this.NotLoggedIn();
    }
  }



  onSubmit = (e) => {
    e.preventDefault();
    axios.get('api/user')
    .then(res => {
      const user = res.data[0].username;
      const password = res.data[0].password;
      const username = this.state.username;
      const passwordEntered = this.state.password;
      if(user === username && passwordEntered === password){
        if(username === '' && passwordEntered === ''){
          document.getElementById('status').innerHTML = '<p>Please Enter A Valid Username and Password</p>';
            this.NotLoggedIn();
        }else{
            document.getElementById('status').innerHTML = '<p>Please Enter A Valid Username and Password</p>';
              this.NotLoggedIn();
        }
        this.UponLoggedIn();
      }else {
        this.NotLoggedIn();
      }

    })
    .catch(error => {
      console.log(error);
    });

  }

  render(){
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = this.LoginButton();
    } else {
      button = this.LogoutButton();
    }
    return (
      <div className="App container">
        <h4
        className="display-4 mt-4 mb-4 text-center"
        >
        <i style={redColor}
        className="fas fa-asterisk">
        </i> Expiration Reminder
        </h4>

        <Container isLoggedIn={isLoggedIn}>{button}</Container>

      </div>
    );
  }

}

export default App;

Answer 1

Вы вызываете this.NotLoggedIn в обработчике onClick, что неверно, поскольку NotLoggedIn возвращает компонент React. В обработчике onCLick вам нужно изменить состояние. Таким образом, вы должны позвонить this.handleLoginClick и this.handleLogoutClick вместо.

Также есть пара ошибок. Например. Вы звоните button = this.LoginButton(), но LoginButton функции ожидают props. Вы должны либо передать реквизиты в функцию, либо вы можете получить к ней доступ в функции как this.props.

То, как вы это сделали, является своего рода антипаттерном, потому что вы определяете несколько компонентов внутри компонента App (LogoutButton, LoginButton и т. Д.). Вы должны разделить их на несколько классов.

Answer 2

Я решил это довольно простым способом, имейте в виду, что у меня есть серверная часть с экспрессом, которая ищет предопределенное имя пользователя и передает его, поэтому я использовала axios, чтобы получить эту информацию и проверить ее в функции onSubmit.

К вашему сведению: если вы чувствуете себя потерянным с React или каким-либо другим языком, просто начните заниматься проектами, вот как я учусь, я прошел несколько курсов удэми, но все же не понял, я учился, делая и В каждом проекте (большом или маленьком) вы выбираете что-то новое и / или получаете лучшее понимание по пути. Просто немного пищи для размышлений, если вы похожи на меня и у вас есть страсть, но вы не знаете, с чего и как начать.

class App extends Component {
    constructor(props){
      super(props);
    this.handleChange = this.handleChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
      this.state = {
          user:[],
          isLoggedIn:false,
          username:'',
          password:''
        };
    }

     handleChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
      }

      handleLogoutClick = e => {
        this.setState({ isLoggedIn: false })
      }


  onSubmit = (e) => {
    e.preventDefault();
    axios.get('API_PATH')
    .then(res => {
      const user = res.data[0].username;
      const password = res.data[0].password;
      const username = this.state.username;
      const passwordEntered = this.state.password;
      if(user === username && passwordEntered === password){
          this.setState({ isLoggedIn:true })
        }
    })
    .catch(error => {
      console.log(error);
    });
  }

  render(){
    return (
      <div className="App">
          <h4
          className="display-4 mt-4 mb-4 text-center"
          >
          <i style={redColor}
          className="fas fa-asterisk">
          </i> Expiration Reminder
          </h4>


          <Container onSubmit={this.onSubmit}>
              {this.state.isLoggedIn ? (
                <>
                <Button className="btn btn-sm btn-light mr-5 float-right" onClick={this.handleLogoutClick}>
                  <i style={redColor} className="fas fa-sign-out-alt"></i> Logout
                </Button>
                <ReminderModal />
                <p className="text-muted text-center">If new reminder does not show up immediently please refresh page</p>
                <ReminderTable />
                </>
              ) : (
                <>
                <div id="status"></div>
                <Form className="loginForm ml-5">
                      <Form.Row>
                      <Form.Group as={Col}>
                      <Form.Label>Username</Form.Label>
                        <Form.Control
                        type="text"
                        name="username"
                        id="username"
                        value={this.state.value}
                        onChange={this.handleChange}
                        >
                        </Form.Control>
                      </Form.Group>
                      <Form.Group as={Col}>
                        <Form.Label>Password</Form.Label>
                        <Form.Control
                        type="password"
                        id="password"
                        name="password"
                        value={this.state.value}
                        onChange={this.handleChange}
                        />
                      </Form.Group>
                      </Form.Row>
                      <Button className="btn btn-sm btn-light" onClick={this.onSubmit}>
                        <i style={redColor} className="fas fa-sign-in-alt"></i> Login
                      </Button>
                    </Form>
                </>
              )}
          </Container>



      </div>
    )
  }

}

export default App;