フラックスを使用して独立したコンポーネント間でデータをやりとりする

Question

あるコンポーネントから別のコンポーネントにデータを渡そうとしています。親子関係はなく、お互いに独立しています。私はfluxxを使わずにそれをやりたい誰も私にこれを手伝ってもらえますか？以下は私のコードです。私はEMPNUMBERの送信先

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 

他のファイルがある

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

export default EmpDetail; 

Answer 1

はすでにあなたのアプリでフラックスアーキテクチャを実装していると仮定すると、以下の通りです。

第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'; 
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 {dispatch,register} from '../Dispatcher/Dispatcher'; 

export default { 

     employeeNumb(Data){ 

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

のようになります。

あなたは少し異なる場合があります試してみました何

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; 

よう

と第二コンポーネントファイルが見えますが、これはあなたが探しているもののための通常の流れです。