时间戳

首页 > 解决方案 > 需要将 EmaiID 和密码从登录组件传递到主组件反应

javascript - 需要将 EmaiID 和密码从登录组件传递到主组件反应

问题描述

React 版本 15.2.1 有人可以告诉我如何在组件之间传递数据。我需要将电子邮件和密码从 Login.js 传递到 Products.js，在那里我在函数 display() 中向服务器发出 http 请求。

登录.js

    import React from "react";
    import { Button, FormGroup, FormControl, ControlLabel } from "react-bootstrap";

export class Login extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        email: "",
        password: ""
    };
}

validateForm() {

    return this.state.email.length > 0 && this.state.password.length > 0;
}

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


handleSubmit = async event => {
    event.preventDefault();

    try {

        this.props.history.push("/products");
    } catch (e) {
        alert(e.message);
    }
}
render() {
    return (
     <div className="Login">
        <form onSubmit={this.handleSubmit}>
            <FormGroup controlId="email" bsSize="large">
                <ControlLabel>Email</ControlLabel>
                <FormControl
                    autoFocus
                    type="email"
                    value={this.state.email}
                    onChange={this.handleChange}
                />
            </FormGroup>
            <FormGroup controlId="password" bsSize="large">
                <ControlLabel>Password</ControlLabel>
                <FormControl
                    value={this.state.password}
                    onChange={this.handleChange}
                    type="password"
                />
            </FormGroup>
            <Button
                block
                bsSize="large"
                disabled={!this.validateForm()}
                type="submit"
            >
                Login
            </Button>
        </form>
    </div>
   );
  }
}

Products.js

    import React from 'react';

    export class Products extends React.Component {

display(){
    var http = new XMLHttpRequest();
    var url = ""
    //have hardcoded username and password here for now. need to get it from Login component

    http.send()
    return http.responseText
}

render() {
    var x=this.display();
    var jsonObject = JSON.parse(x)
    // console.log(jsonObject)
    var conArray=[]
    for (var y=0; y < jsonObject.length; y++){
        console.log(jsonObject[y]['completeName'])
        conArray.push(jsonObject[y]['completeName'])
    }
    return (
        <div>
            <h2>Product Names</h2>
            {
                conArray.map(t => <div>{t}</div>)
            }
        </div>

    );
  }
}

index.js

    import React from 'react';
    import { render } from 'react-dom';
    import {BrowserRouter as Router} from "react-router-dom";
    import Route from 'react-router-dom/Route';
    import { browserHistroy, Switch } from 'react-router';
    import createBrowserHistory from 'history/createBrowserHistory';
    const newHistory = createBrowserHistory();

    import { Products } from "./components/Products";
    import { Login } from "./components/Login";
    import "babel-polyfill";

    class App extends React.Component {

render() {
    return (

       <Router history={newHistory}>
           <Switch>
               <Route path="/" exact component={Login}/>
               <Route path="/products" exact component={Products}/>
           </Switch>
       </Router>
    );
}
}

render(<App />, window.document.getElementById('app'));

标签： javascriptreactjsreact-nativewebpackreact-router

解决方案

一种方法是通过state variable历史传递道具，如下所示：

    this.props.history.push({
  pathname: '/products',
  state: { email: this.state.email,
           password: this.state.password }
    })

并且您可以使用this.props.location.state.emailand在您的 products.js 中访问这些，this.props.location.state.password还有一件事是不要忘记包装您的 product.js 组件，withRouter以便能够连接和使用其中的值/products

推荐阅读