Javascript 基于登录注销和表单提交的反应条件呈现

我正在尝试基于一个表单提交启动条件渲染，该表单提交到我的节点路由器，但我没有得到结果。这些按钮不会隐藏“提醒模型”和“提醒表”的内容，并且在我提交登录表单时不会发生任何事情。我知道这不是最好的方法，但如果有人能给我指出正确的方向，我将不胜感激。我宁愿不使用另一个插件来进行react，也宁愿自己去做，以避免更新冲突等

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;

import React，{Component}来自'React'；
从“react bootstrap”导入{容器、按钮、表单、列}；
从“axios”导入axios；
导入“/App.css”；
从“/components/MemberList”导入提醒表；
从“./components/modal”导入提醒模式；
常数redColor={
颜色：“#e52d2d”
}
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
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）；
此.state={
用户：[]，
伊斯洛格丁：错，
用户名：“”，
密码：“”
};
}
handleLoginClick（）{
this.setState（{isLoggedIn:true}）；
}
handleLogoutClick（）{
this.setState（{isLoggedIn:false}）；
}
手变（e）{
这是我的国家({
[e.target.name]：e.target.value
});
}
登录按钮=道具=>{
返回(
用户名
密码
登录
);
}
LogoutButton=props=>{
返回(
注销
)
}
NotLoggedIn=props=>{
返回(
请登录
{this.LoginButton（）}
)
}
UponLoggedIn=props=>{
返回(
如果新提醒未立即显示，请刷新页面
)
}
ViewScreen=道具=>{
const isLoggedIn=props.isLoggedIn；
如果（isLoggedIn）{
返回这个.UponLoggedIn（）；
}否则{
返回这个.NotLoggedIn（）；
}
}
onSubmit=（e）=>{
e、 预防默认值（）；
axios.get（'api/user'）
。然后（res=>{
const user=res.data[0]。用户名；
const password=res.data[0]。密码；
const username=this.state.username；
const passwordEntered=this.state.password；
如果（用户===用户名和密码输入===密码）{
如果（用户名==''&&密码输入==''）{
document.getElementById（'status'）。innerHTML='请输入有效的用户名和密码
'；
这个.NotLoggedIn（）；
}否则{
document.getElementById（'status'）。innerHTML='请输入有效的用户名和密码
'；
这个.NotLoggedIn（）；
}
this.UponLoggedIn（）；
}否则{
这个.NotLoggedIn（）；
}
})
.catch（错误=>{
console.log（错误）；
});
}
render（）{
const isLoggedIn=this.state.isLoggedIn；
让按钮；
如果（isLoggedIn）{
按钮=this.LoginButton（）；
}否则{
button=this.LogoutButton（）；
}
返回(
到期提醒
{按钮}
);
}
}
导出默认应用程序；
您正在
onClick
处理程序中调用
this.NotLoggedIn
，这是错误的，因为
NotLoggedIn
返回React组件。在
onCLick
处理程序中，需要更改状态。因此，您应该调用
this.handleLoginClick
和
this.handleLogoutClick

还有一些bug。例如，您正在调用
button=this.LoginButton（）
，但是
LoginButton
函数需要
props
。您可以将道具传递给函数，也可以在函数中以
this.props
的形式访问它

您这样做的方式也是一种反模式，因为您在应用程序组件中定义了多个组件（LogoutButton、LoginButton等）。您应该将它们分成多个类。
您正在
onClick
处理程序中调用
this.NotLoggedIn
，这是错误的，因为
NotLoggedIn
返回React组件。在
onCLick
处理程序中，需要更改状态。因此，您应该调用
this.handleLoginClick
和
this.handleLogoutClick

还有一些bug。例如，您正在调用
button=this.LoginButton（）
，但是
LoginButton
函数需要
props
。您可以将道具传递给函数，也可以在函数中以
this.props
的形式访问它

您这样做的方式也是一种反模式，因为您在应用程序组件中定义了多个组件（LogoutButton、LoginButton等）。您应该将它们分为多个类。
我用一种相当简单的方法解决了这个问题，请记住，我有一个express后端，它搜索预定义的用户名和密码，这就是为什么我使用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;