反应不同组件之间的通信

时间:2019-01-11 09:37:53

标签: reactjs react-router react-props

我对此很了解,我正在尝试通过React从一个js页面传递用户的详细信息以在React的另一个页面上显示,但是我不确定如何完成此操作。以下是我所拥有的

我不确定是否应该使用App.js路由将道具传递到显示页面,还是可以在通过NavLink输入详细信息的页面上传递道具??感谢您的帮助

这是我的APP.js路由。我应该在这里传递页面的道具吗?

ignoreCase

这是我获取用户输入的详细信息并获取状态的地方

import React, { Component } from 'react';
//import PostList from './posts/YourDetails'
import { BrowserRouter, Switch} from 'react-router-dom';
import { Route} from 'react-router-dom';
import ReactDom from 'react-dom';

import './App.css';
import './index.css';

import home             from "./Components/PersonalDetails/home";
import PersonalDetails    from "./Components/PersonalDetails/pDetails_Name";
import addDetails    from "./Components/PersonalDetails/addDetails";
import YourCar          from "./Components/PersonalDetails/YourCar";
import displayDetails       from "./Components/PersonalDetails/displayDetails";
import TEST          from "./Components/TEST";
import Navigation          from "./Components/Navigation";

 class App extends Component {
      render() {

        return (
             <BrowserRouter>
                <div>
                  <Navigation / >
                     <Switch>
                         <Route
                         path="/"
                         component={home} exact/ >

                         <Route
                            path="/pDetails_Name"
                            component={PersonalDetails}/ >

                          <Route
                            path="/displayDetails"
                            component={displayDetails}/ >

                         <Route component={Error}/ >
                     </Switch>
                   <TEST / >
                </div>
            </BrowserRouter>
        )
      }
    }

    export default App;

我正在尝试渲染用户喜欢的道具以显示在下一页上,但不确定如何处理

import {NavLink} from 'react-router-dom'
    import React, {Component } from 'react'


    class pDetails_Name extends React.Component{
            /*const pDetails_Name = () => {*/

         constructor(props){
                   super(props)
                   this.state = {
                        FirstName: "",
                        MiddleName:"",
                        Surname: "",
                        Email: ""
                     }
            this.handleInputChange = this.handleInputChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
         }

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

        handleSubmit =(event)=> {
             event.preventDefault()
         const user = {
                FirstName: this.state.FirstName,
                MiddleName: this.state.MiddleName,
                Surname: this.state.Surname,
                Email: this.state.Email,

         }
             console.log("The details entered are: " , user);
        }

        getInitialState () {
            return {
              selectedOption: ''
            };
        }

    render(){
        return(
               <div id="Overhead">
                    <div className="borderText">
                              Lets get some personal details
                    </div>

             <div className ="container">

                  <form  onSubmit ={this.handleSubmit}>

                                 <div className="row">
                                             <div className="col-100">
                                                <label id="btnLabel">Have you been a permanent resident of the USA from birth?</label>
                                            </div>

                                             <div className="col-75">
                                                 <input type="radio"
                                                        value="Yes"
                                                        name ="Resident"
                                                       defaultChecked={this.state.selectedOption === 'Yes'}
                                                       onChange={this.handleInputChange}
                                                  /> Yes<br></br>

                                                  <input
                                                        type="radio"
                                                        value="No"
                                                        name ="Resident"
                                                      defaultChecked={this.state.selectedOption === 'No'}
                                                      onChange={this.handleInputChange}
                                                  /> No<br></br>
                                             </div>
                                   </div>



                                    <div className="row">
                                            <div className="col-5">
                                                <label>Title</label>
                                            </div>
                                                <div className="col-15">
                                                     <select name= "Title" onChange={this.handleInputChange}>
                                                        <option value="">Select</option>
                                                        <option value="Mr">Mr</option>
                                                        <option value="Miss">Miss</option>
                                                        <option value="Mrs">Mrs</option>
                                                        <option value="Dr">Dr</option>
                                                     </select>
                                                </div>

                                                <div className="col-25">
                                                    <label>First Name:</label>
                                               </div>
                                                <div className="col-75">
                                                    <input type="text"
                                                           name="FirstName"
                                                           placeholder="Your first name.."
                                                           onChange={this.handleInputChange} value={this.state.FirstName}/>
                                                </div>
                                      </div>



                                      <div className="row">
                                           <div className="col-5">
                                              <label>Middle Name:</label>
                                           </div>

                                           <div className="col-15">
                                               <input   type="text"
                                                        name="MiddleName"
                                                        placeholder="Your middle name (Optional).. "
                                                        onChange={this.handleInputChange} value={this.state.MiddleName}
                                               />
                                           </div>
                                           <div className="col-25">
                                                <label>Surname:</label>
                                           </div>
                                            <div className="col-75">
                                                <input type="text"
                                                       name="Surname"
                                                       placeholder="Your surname.."
                                                       onChange={this.handleInputChange} value={this.state.Surname} />
                                            </div>
                                      </div>



                          <div className="row">
                              <div className="col-5">
                                   <label>Gender:</label>
                              </div>
                                  <div className="col-15">
                                       <select name = "Gender" onChange={this.handleInputChange} >
                                       <option value="Male">Male</option>
                                       <option value="Female">Female</option>
                                       </select>
                                  </div>

                                    <div className="col-25">
                                            <label>Marital Status:</label>
                                    </div>
                                    <div className="col-75">
                                          <select name = "MaritalStatus" onChange={this.handleInputChange}>
                                                                     <option value="">Select</option>
                                                                     <option value="Married">Married</option>
                                                                     <option value="Single">Single</option>
                                                                     <option value="Civil_Partnership">Civil Partnership</option>
                                                                     <option value="Other">Other</option>
                                          </select>
                                     </div>
                          </div>



                                    <div className="row">
                                               <div className="col-5">
                                                    <label>Age Range:</label>
                                               </div>
                                                    <div className="col-15">
                                                        <select   name="AgeRange" onChange={this.handleInputChange}>
                                                             <option value="">Select</option>
                                                             <option value="17-25">17-25</option>
                                                             <option value="26-60">26-60</option>
                                                             <option value="61-80">61-80</option>
                                                        </select>
                                                    </div>

                                      <div className="col-25">
                                           <label>Email:</label>
                                      </div>
                                        <div className="col-75">
                                                 <input type="text"
                                                        name="Email"
                                                        placeholder="Your email.."
                                                        onChange={this.handleInputChange}
                                                        value={this.state.Email}/>
                                         </div>
                                    </div>

                                <button>Submit  </button>

                                 <div className="borderButtons">
                                    <ul className="header">
                                      <li className ="borderLinks" type="label"><NavLink id="nav" to="/">Back</NavLink></li>
                                      <li className ="borderLinks" type="label"><NavLink id="nav" to="/displayDetails">Next</NavLink></li>
                                    </ul>
                                 </div>


                         </form>
                     </div>
                </div>

            )
          } //end of render


    }


    export default pDetails_Name;

1 个答案:

答案 0 :(得分:0)

由于尝试通信的组件是独立的组件(而不是父子或兄弟姐妹),因此您需要使用Redux(或同等组件)(或)基于React Event的通信(为此我没有找到任何文档)(或)使用RxJS可观察对象的共享服务。

我已经使用RxJS可观察对象创建了一个示例here

  • 主页和关于组件在这里是独立的
  • 主页组件包含输入,用户可以在其中输入数据
  • 转到“关于”,其中显示用户详细信息

注意:请不要与组件名称混淆。