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'));
最佳答案
一种方法是通过历史的 state variable
传递 props
像这样的事情:
this.props.history.push({
pathname: '/products',
state: { email: this.state.email,
password: this.state.password }
})
并且您可以使用 this.props.location.state.email
和 this.props.location.state.password
等在您的 products.js 中访问这些内容事情是不要忘记用 withRouter
包装你的 product.js 组件,以便能够连接和使用 /products
关于javascript - 需要将 EmaiID 和密码从登录组件传递给 home 组件 react,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50302525/