Pass Daten zwischen unabhängigen Komponenten mit Fluss reagieren

Question

Ich versuche, Daten von einer Komponente zur anderen zu übergeben. aber es hat keine Eltern-Kind-Beziehung und es ist unabhängig voneinander. Ich möchte es mit Flussmittel nicht reduieren. Kann mir jemand helfen? Unten ist mein Code.

export class EmpSearch extends React.Component { 
constructor(props) { 
super(props); 
this.state = { 
    Empnumber: '' 
}; 
} 

updateEmpNumber(e) { 
this.setState({Empnumber: e.target.value}); 
} 

render() { 
    return (
    <div className="row"> 
    <form> 
     <div className="form-group"> 
     <label htmlFor="Empnumber">Emp Number</label> 
     <input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.state.Empnumber} onChange={this.updateEmpNumber.bind(this)}/> 
     </div> 
    </form> 
    </div> 
); 
} 
} 
export default EmpSearch 

Die andere Datei ist, wo ich die EmpNumber senden möchten unten ist,

class EmpDetail extends React.Component { 
render() { 
return (
    <div className="container"> 
    <input type="text"/> 
    </div> 
); 
} 
} 

export default EmpDetail; 

Answer 1

Angenommen, Sie haben bereits die Fluss Architektur in Ihrer App implementiert.

Ihre 1. Komponente wird so sein.

import React from 'react'; 
import UserAction from '../../Actions/UserActions'; 

export class EmpSearch extends React.Component { 
constructor(props) { 
super(props); 
this.state = { 
    Empnumber: '' 
}; 
} 

updateEmpNumber(e) { 
this.setState({Empnumber: e.target.value}); 
UserAction.employeeNumb(this.state.Empnumber); 
} 

render() { 
    return (
    <div className="row"> 
    <form> 
     <div className="form-group"> 
     <label htmlFor="Empnumber">Emp Number</label> 
     <input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.state.Empnumber} onChange={this.updateEmpNumber.bind(this)}/> 
     </div> 
    </form> 
    </div> 
); 
} 
} 
export default EmpSearch 

Die Aktionen Datei

import {dispatch,register} from '../Dispatcher/Dispatcher'; 

export default { 

     employeeNumb(Data){ 

     dispatch({ actionType:'EMPNO',data:Data}); 
     } 
} 

Der Shop wie

aussehen

import {dispatch,register} from '../Dispatcher/Dispatcher'; 
import AppConstants from '../Constants/AppConstants'; 
import {EventEmitter} from 'events'; 

const CHANGE_EVENT = 'change'; 
var a=0; 

const UserStore = Object.assign(EventEmitter.prototype,{ 
    emitChange(){ 
    this.emit(CHANGE_EVENT) 
    }, 
    addChangeListener(callback){ 
    this.on(CHANGE_EVENT,callback); 
    }, 
    removeChangeListener(callback){ 
    this.removeListener(CHANGE_EVENT,callback) 
    }, 
    setEmpData(data){ 
    a=data; 
    }, 
    getEmpData(){ 
    return a; 
    } 

}); 

    dispatcherIndex:register((action)=>{ 
    switch (action.actionType) { 
     case AppConstants.EMPNO: 
       UserStore.setEmpData(action.data); 
       UserStore.emitChange(); 
       break; 
    } 

    UserStore.emitChange(); 

    }); 


export default UserStore; 

Der Dispatcher Datei

aussehen wird

und die zweite Komponente Datei sieht aus wie

import React from 'react'; 
import Store from '../../Store/UserStore'; 

    class EmpDetail extends React.Component { 

     constructor(props){ 
     super(props); 
     this.state={ 
      empno:'' 
     }; 

     } 

     componentDidMount(){ 
     Store.addChangeListener(this._onChange); 
     } 

     componentWillUnmount =() =>{ 
     Store.removeChangeListener(this._onChange); 
     } 

     _onChange =() =>{ 
     this.setState({empno:Store.getEmpData()}); 
     } 


    render() { 
    return (
     <div className="container"> 
     <input type="text"/> 
     <input type="button" onClick={()=>{console.log(this.state.empno);}}/> 
     </div> 
    ); 
    } 
    } 

    export default EmpDetail; 

Was Sie versucht haben, vielleicht etwas anders sein, aber dies ist der normale Fluss für das, was Sie suchen.