使用通量反应在独立组件之间传递数据答案

【问题标题】：Pass data between independent component using flux react使用通量反应在独立组件之间传递数据
【发布时间】：2017-05-04 08:40:38
【问题描述】：

我正在尝试将数据从一个组件传递到另一个组件。但它没有父子关系，并且彼此独立。我想使用通量而不是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;

【问题讨论】：

标签： reactjs flux

【解决方案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

Actions 文件看起来像

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;

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

【讨论】：

感谢您的回复.. 您从哪里接调度员？是一门课吗？或者你已经安装了它？如果是一门课，你能在上面添加吗？