獨立組件之間使用焊劑反應傳遞數據

Question

我試圖將數據從一個組件傳遞到另一個組件。但它沒有親子關係，並且彼此獨立。我想用flux而不是redux做它。任何人都可以幫助我做到這一點？以下是我的代碼。

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 

另一個文件是我要發送的EmpNumber低於，

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

export default EmpDetail; 

Answer 1

假設你已經執行了通量架構您的應用程序。

你的第一部分會是這樣的。

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 

的操作文件看起來像

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

export default { 

     employeeNumb(Data){ 

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

的商店看起來像

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; 

的調度文件

import {Dispatcher} from 'flux'; 

const flux = new Dispatcher(); 

export function register(callback){ 
    return flux.register(callback); 
} 

export function dispatch(actionType,action){ 
    flux.dispatch(actionType,action); 
} 

和第二個部件文件看起來像

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; 

什麼你已經嘗試可能會略有不同，但是這是你在找什麼的正常流動。