Reactjs 使用flux react在独立组件之间传递数据

我试图将数据从一个组件传递到另一个组件。但它没有亲子关系，相互独立。我想使用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

导出类EmpSearch扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
编号：''
};
}
updateEmpNumber（e）{
this.setState（{Empnumber:e.target.value}）；
}
render（）{
返回(
电磁脉冲数
);
}
}
导出默认搜索

另一个文件是我想发送的EMP号码在下面

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

 export default EmpDetail;

类EmpDetail扩展了React.Component{
render（）{
返回(
);
}
}
导出默认的详细信息；

假设您已经在应用程序中实现了flux架构

您的第一个组件将如下所示

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;

从“React”导入React；
从“../../Store/UserStore”导入存储；
类EmpDetail扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
empno:'
};
}
componentDidMount（）{
Store.addChangeListener（this.\u onChange）；
}
组件将卸载=（）=>{
Store.removeChangeListener（this.\u onChange）；
}
_onChange=（）=>{
this.setState（{empno:Store.getEmpData（）}）；
}
render（）{
返回(
{console.log（this.state.empno）；}}/>
);
}
}
导出默认的详细信息；

---

您所尝试的可能略有不同，但这是您正在寻找的正常流程。

假设您已经在应用程序中实现了flux架构

您的第一个组件将如下所示

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;

从“React”导入React；
从“../../Store/UserStore”导入存储；
类EmpDetail扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
empno:'
};
}
componentDidMount（）{
Store.addChangeListener（this.\u onChange）；
}
组件将卸载=（）=>{
Store.removeChangeListener（this.\u onChange）；
}
_onChange=（）=>{
this.setState（{empno:Store.getEmpData（）}）；
}
render（）{
返回(
{console.log（this.state.empno）；}}/>
);
}
}
导出默认的详细信息；

---

您尝试的内容可能略有不同，但这是您所寻找内容的正常流程。

谢谢您的回复。。你从哪里接调度员？这是一节课吗？或者你已经安装了它？如果它是一个类，你能添加上面吗？谢谢你的回复。。你从哪里接调度员？这是一节课吗？或者你已经安装了它？如果它是一个类，你能添加上面吗？