如何将用户名传递到reactjs中的多个页面

Question

我是 reactjs 的新手。我也成功创建了用户注册选项卡和登录选项卡。登录后出现问题；用户名应显示在 nav 栏中。作为我的网站，我分别创建了导航栏页面（NavBar.js）和登录页面（Login.js）据我所知，sessionStorage 和 props 可以做到这一点。但我完全不知道如何使用它。请任何人提示解决我的问题。我的后端是环回这是我的 login.js

const FormItem = Form.Item;

    export default class Login extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          email: "",
          password: "",
          details: ""
        };
      }

      handleChange = event => {
        this.setState({ [event.target.name]: event.target.value });
      };

      onSubmit(e) {
        var email = this.state.email;
        var password = this.state.password;
        axios
          .get(
            `http://localhost:3000/api/UserLogins/findOne?filter={"where":{"email":"${email}"}}`
          )
          .then(response => {
            this.setState({ details: response.data }, () => {
              if (password === this.state.details.password) {
                console.log("login");
              } else {
                console.log("not login");
              }
            });
          })
          .catch(err => console.log(err));
        e.preventDefault();
      }

      render() {
        let UserLoginDetail = this.state.details.username;
        sessionStorage.setItem(UserLoginDetail, this.state.details.username);

        return (
          <div>
            <form onSubmit={this.onSubmit.bind(this)}>
              <FormItem>
                <Input
                  onChange={this.handleChange}
                  prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
                  name="email"
                  type="email"
                  placeholder="abcd@gmail.com"
                />
              </FormItem>
              <FormItem>
                <Input
                  onChange={this.handleChange}
                  prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
                  name="password"
                  type="password"
                  placeholder="Password"
                />
              </FormItem>
              <FormItem>
                <Checkbox>Remember me</Checkbox>
                <a className="login-form-forgot" href="">
                  Forgot password
                </a>
                <Button
                  type="primary"
                  htmlType="submit"
                  className="login-form-button"
                >
                  Log in
                </Button>
              </FormItem>
            </form>
          </div>
        );
      }
    }

NavBar.js代码为

import React from 'react';
import 'antd/dist/antd.css';
import 'bootstrap/dist/css/bootstrap.css';
import { Collapse,Navbar,NavbarToggler,NavbarBrand,Nav,NavItem,NavLink} from 'reactstrap';
import ResizeImage from 'react-resize-image';
import { Row, Col } from 'antd';
import { Modal, Button } from 'antd';
import { Tabs,Icon } from 'antd';
import Login from './Login';
import Register from './Register';

const TabPane = Tabs.TabPane;

function callback(key) {
  console.log(key);
}

export default class NavBar extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false,
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  state = { visible: false }

  showModal = () => {
    this.setState({
      visible: true,
    });
  }

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }

  render() {
    let myItem = sessionStorage.getItem('userName');
    return (
      <Row className="vert-align">
      <Col push={24}>
      <div>
        <Navbar color="light" white="true" expand="md">
          <NavbarBrand href="/">
          <ResizeImage
            src={require('../image/logo.png')}
            alt="logo"

          />
      </NavbarBrand>
        <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/">Home</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="/Car">All Cars</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="/Rate">Rates</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="/About">About Us</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="/BecomePartner"><Icon type="team" />  Become a Partner</NavLink>
              </NavItem>
              <p>{myItem}</p>
              <div>
                <Button type="default" onClick={this.showModal}>
                  <Icon type="login" />Login
                </Button>

                <Modal
                  visible={this.state.visible}
                  onCancel={this.handleCancel}
                  onOk={this.handleOk}
                >
                  <Tabs defaultActiveKey="1" onChange={callback}>
                    <TabPane tab="Login" key="1"><Login/>
                    </TabPane>
                    <TabPane tab="Register" key="2"><Register/></TabPane>
                  </Tabs>
                </Modal>

              </div>

            </Nav>
          </Collapse>
        </Navbar> 
      </div>
      </Col >
      </Row >
    );
  }
}

Answer 1

在登录文件中以这种方式使用 SessionStorage：-

sessionStorage.setItem('UserName', this.state.details.username);

在当前代码中，您将键用作 this.state.details.username，将值用作 this.state.details.username。

Key 应始终固定，不应依赖于用户输入，以便您可以使用它来获取值。

共享 NavBar 代码后：-

这段代码应该放在

里面

 axios
 .get(
  `http://localhost:3000/api/UserLogins/findOne?filter={"where":{"email":"${email}"}}`
          )
     .then(response => {
      this.setState({ details: response.data }, () => {
       if (password === this.state.details.password) {
        console.log("login");
        sessionStorage.setItem('UserName', this.state.details.username);
        this.props.handeLogin(); 
        /*It will change state of NavBar 
         Component,and it would be re-rendered.
         So,we will get new User Name from 
         session.*/

       } else {
          console.log("not login");
          }
        });
          })

会话值应该在这个 axios 调用中设置，因为这里的值正在改变，它不应该在渲染方法中分配，因为每次状态更改时都会调用渲染方法。

在导航文件中获取用户名：- sessionStorage.getItem('userName');

在 Navfile 添加状态属性 isLoggedIn,

 this.state = {
      isOpen: false,
      isLoggedIn:false
    };

然后添加方法 handlelogin() :-

handleLogin=()=>{
   this.setState({
      isLoggedIn:true
    })
}.

我们遵循了更改状态的过程，因为即使 SessionStorage 用户名更改，导航组件也不会重新呈现。

如果其他组件需要用户名，可以使用以下方式获取：- sessionStorage.getItem('userName');

如果您计划使用 Redux 进行状态管理，请访问：- https://redux.js.org/。

Redux 基于 Single Source of Truth。它就像一个组件，例如，Login 会使用新的用户名更新 redux store，而 NavBar 组件将获得更新后的用户名，因为它会订阅 store。

希望这对您有所帮助，

干杯!!

如何将用户名传递到reactjs中的多个页面

How to pass the username into multi pages in reactjs

loopback

reactjs