Как перенести данные из одного родительского компонента в другой родительский компонент в реакции, используя параметры маршрутизатора / маршрутизатора - PullRequest
0 голосов
/ 25 августа 2018

Я новичок, чтобы отреагировать на разработку приложений. Я отправляю здесь список своего кода, чтобы найти решение. Есть разные файлы

. Сейчас у меня есть 1 index.html и один app.js, index.js иlogin.js и product.js

В моем app.js реализована маршрутизация, а в index.js есть маршрутизатор браузера, а для входа в js есть вызов axios api и простое приложение для входа в систему, и после успешного входа я перехожу кдругая страница, то есть product.js

, поэтому список моих файлов

1) App.js

import React from 'react';
import { Switch, Route } from 'react-router-dom'
import Product from './components/product';
import Coal from './components/coal';
import Summary from './components/summary';
import Login from './components/login';

class App extends React.Component {
  render() {
    return (
      <Switch>
        <Route exact path = '/' component = {Login} />
        <Route path = "/product" component = {Product} />
        <Route path = "/coal" component = {Coal} />
        <Route path = "/summary" component = {Summary} />
      </Switch>

    );
  }
}

export default App;

2) Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import Login from './components/login';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<BrowserRouter historty = {this.historty}>
    <Login/>
</BrowserRouter>, document.getElementById('root'));
registerServiceWorker();

3) Login.js

import React from 'react'
import axios from 'axios';

class Login extends React.Component  {
constructor(props) {
    super(props)
    this.state = ({
        admin_id : '',
        password : '',
    });

    this.handlePassword = this.handlePassword.bind(this);
    this.handleUserName  =this.handleUserName.bind(this);
    this.loginUp = this.loginUp.bind(this);
}

handleUserName(e) {
    e.preventDefault();
    this.setState({admin_id: e.target.value})
}

handlePassword(e) {
    e.preventDefault();
    this.setState({password: e.target.value})
}

componentDidMount() {
}

loginUp() {

    let userDetails = {
        admin_id: this.state.admin_id,
        password: this.state.password
    }
    if(this.state.admin_id === '' && this.state.password === '') {
        alert('please enter fields');
    } else {
      axios.post("http://103.10.191.145:1337/sapl/admin/login", userDetails , this.axiosConfig)
      .then((res) => {
        if(res.data === 'Admin login successfully'){
            this.setState({userName : userDetails.admin_id})
            this.props.history.push('/product');        
        } else {
            alert('we are not in success');
        }
      })
      .catch((err) => {
          console.log('axios error' , err);
      })
    }
  }


render() {
return(
  <div className = "container">
    <div className ="row">
        <div className = "col-md-12">
            <h3>Login</h3>
            <input className="form-control" type="text" placeholder="EmailID" value = {this.state.admin_id}  onChange = {this.handleUserName} />
            <input className="form-control" type="password" placeholder="password" value = {this.state.password} onChange={this.handlePassword} />
            <button className="btn btn-primary" type="button" onClick={() => this.loginUp()}> Login</button>
        </div>
    </div>
  </div>
    )   
  }
}

export default Login

4) product.js

import React from 'react';

class Product extends React.Component {
    constructor(props){
        super(props);

    }

    coalOption() {

        this.props.history.push('/coal');
    }

    componentDidMount() {
        var usname   = this.state;
        console.log('usen' , usname);
    }

    render() {
        return(
            <div className = 'container'>
                <div className = 'row'>
                    <div className = 'col-md-12'>
                    <h3>Welcome the username</h3>
                    <button className="btn btn-primary" type="button" onClick={() => this.coalOption()}>coal</button>
                    </div>
                </div>
            </div>

        )
    }
}

export default Product

, поэтому я хочу ввести имя пользователя в свой продукт .js и распечатать его в HTML-теге, может кто-нибудь помочья хочу показать дело PoC

1 Ответ

0 голосов
/ 25 августа 2018

Вы можете передать переменную с помощью history.push

this.props.history.push({
 pathname: '/product',
  userDetails: userDetails,
})

и доступ к ним в компоненте product будет таким:

this.props.location.userDetails

Надеюсь, это будет очень полезно.

...