Question

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

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

使用flux flux

1 个答案: