带flux的reactjs中的表单

// Action.js
export const updateInput = (value) => ({
  type: 'UPDATE_INPUT',
  payload: value,
});

// Dispatcher.js
import { Dispatcher } from 'flux';
export const AppDispatcher = new Dispatcher();

// Store.js
import { EventEmitter } from 'events';
import AppDispatcher from './Dispatcher';

class FormStore extends EventEmitter {
  constructor() {
    super();
    this.formData = {};
  }

  handleActions(action) {
    switch (action.type) {
      case 'UPDATE_INPUT':
        this.formData = { ...this.formData, [action.payload.field]: action.payload.value };
        this.emit('change');
        break;
      default:
        break;
    }
  }
}

const formStore = new FormStore();
AppDispatcher.register(formStore.handleActions.bind(formStore));

export default formStore;

// FormComponent.js
import React from 'react';
import { updateInput } from './Action';
import formStore from './Store';

class FormComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = formStore.formData;
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    formStore.on('change', () => {
      this.setState(formStore.formData);
    });
  }

  handleChange(event) {
    const { name, value } = event.target;
    updateInput({ field: name, value });
  }

  render() {
    return (
      <form>
        <input type="text" name="username" value={this.state.username || ''} onChange={this.handleChange} />
        <input type="password" name="password" value={this.state.password || ''} onChange={this.handleChange} />
      </form>
    );
  }
}

export default FormComponent;